/* ============================================================
   MUNICIBID DARK MODE OVERRIDES
   ============================================================
   Loaded LAST — overrides Bootstrap/Shards utility classes,
   framework components, and inline styles for dark mode.
   ============================================================ */

/* ---- Smooth transitions (disable on load to prevent FOUC) ---- */
html:not(.no-transition) body,
html:not(.no-transition) body * {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

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

/* ---- Bootstrap utility overrides ---- */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .text-body {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-lg {
    box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] hr {
    border-top-color: var(--border-color);
}

/* ---- Cards ---- */
[data-theme="dark"] .card {
    background-color: var(--bg-surface);
    border-color: var(--border-card);
    color: var(--text-primary);
}
[data-theme="dark"] .card-header {
    background-color: var(--bg-surface-alt);
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .card-footer {
    background-color: var(--bg-surface);
    border-top-color: var(--border-color);
}
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-title a {
    color: var(--text-heading);
}

/* ---- Modals ---- */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}
[data-theme="dark"] .modal-backdrop.show {
    background: var(--bg-body);
    background-image: none;
}
[data-theme="dark"] .modalContentValidation {
    background: var(--bg-surface);
    box-shadow: var(--shadow-xl);
}

/* ---- Forms ---- */
[data-theme="dark"] .form-control {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}
[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-input);
    border-color: var(--border-focus);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-placeholder);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--bg-muted);
}
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-muted);
    border-color: var(--border-input);
    color: var(--text-secondary);
}
[data-theme="dark"] .custom-select {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}
[data-theme="dark"] select.form-control {
    background-color: var(--bg-input);
    color: var(--text-primary);
}
[data-theme="dark"] textarea.form-control {
    background-color: var(--bg-input);
    color: var(--text-primary);
}

/* ---- Tables ---- */
[data-theme="dark"] .table {
    color: var(--text-primary);
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-top-color: var(--border-color);
}
[data-theme="dark"] .table thead th {
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .table-bordered {
    border-color: var(--border-color);
}
[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
    border-color: var(--border-color);
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe);
}
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--table-hover);
    color: var(--text-primary);
}
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td {
    background-color: var(--bg-surface-alt);
}

/* ---- Dropdowns ---- */
[data-theme="dark"] .dropdown-menu:not(.about) {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-surface-hover);
    color: var(--text-heading);
}
[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-color);
}
[data-theme="dark"] .dropdown-header {
    color: var(--text-secondary);
}

/* ---- Nav & Tabs ---- */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-surface);
    border-color: var(--border-color) var(--border-color) var(--bg-surface);
    color: var(--text-heading);
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
}
[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--color-primary);
}

/* ---- List groups ---- */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-surface-hover);
}
[data-theme="dark"] .list-group-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ---- Pagination ---- */
[data-theme="dark"] .pagination li a {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .page-link {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-link);
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-muted);
    border-color: var(--border-color);
    color: var(--text-placeholder);
}

/* ---- Breadcrumbs ---- */
[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-surface-alt);
}
[data-theme="dark"] #breadcrumb-item,
[data-theme="dark"] #breadcrumb-item > ul {
    background: transparent !important;
    box-shadow: none !important;
}
[data-theme="dark"] #breadcrumb > ul {
    border-bottom-color: var(--border-color);
}

/* ---- Badges ---- */
[data-theme="dark"] .badge-light {
    background-color: var(--badge-bg);
    color: var(--badge-text);
}
[data-theme="dark"] .badge-secondary {
    background-color: var(--bg-muted);
}

/* ---- Buttons ---- */
[data-theme="dark"] .btn-light {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-heading);
}
[data-theme="dark"] .btn-outline-lightviewmore {
    border-color: var(--border-color);
    color: var(--text-secondary);
}
[data-theme="dark"] .btn-outline-lightviewmore:hover {
    background-color: var(--bg-muted);
    color: var(--text-on-primary);
}

/* ---- Close buttons ---- */
[data-theme="dark"] .close {
    color: var(--text-primary);
    text-shadow: none;
}

/* ---- Popover / Tooltip ---- */
[data-theme="dark"] .popover {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}
[data-theme="dark"] .popover-body {
    color: var(--text-primary);
}
[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-tooltip);
}

/* ---- Custom Checkbox/Radio (Shards) ---- */
[data-theme="dark"] .custom-control-label::before {
    background-color: var(--bg-input);
    border-color: var(--border-input);
}

/* ---- Headings ---- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-heading);
}

/* ---- Links ---- */
[data-theme="dark"] a {
    color: var(--text-link);
}
[data-theme="dark"] a:hover {
    color: var(--text-link-hover);
}

/* Anchors acting as buttons need to keep the button's text color, not the
   generic link color above (which has higher specificity than .btn-primary
   on its own). Explicit white for the solid colored variants; outline and
   light variants are handled by their own targeted rules elsewhere. */
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] a.btn-success,
[data-theme="dark"] a.btn-danger,
[data-theme="dark"] a.btn-warning,
[data-theme="dark"] a.btn-info,
[data-theme="dark"] a.btn-dark {
    color: #ffffff;
}
[data-theme="dark"] a.btn-primary:hover,
[data-theme="dark"] a.btn-success:hover,
[data-theme="dark"] a.btn-danger:hover,
[data-theme="dark"] a.btn-warning:hover,
[data-theme="dark"] a.btn-info:hover,
[data-theme="dark"] a.btn-dark:hover {
    color: #ffffff;
}

/* ---- Specific Municibid components ---- */

/* Navbar - keep dark always, just slightly darker in dark mode */
[data-theme="dark"] .navbar {
    background-color: var(--bg-header) !important;
}
[data-theme="dark"] .navbar[style*="background-color: #214964"] {
    background-color: var(--bg-header) !important;
}

/* Footer - already dark, slightly darker in dark mode */
[data-theme="dark"] footer[style*="background-color: #1e1e1e"] {
    background-color: var(--bg-footer) !important;
}
[data-theme="dark"] footer .container-fluid[style*="background-color: black"] {
    background-color: var(--bg-footer-inner) !important;
}

/* Main content wrapper */
[data-theme="dark"] #wrapper {
    background: var(--bg-body);
}
[data-theme="dark"] #content {
    background: var(--bg-body);
}
[data-theme="dark"] .Site-content {
    color: var(--text-primary);
}

/* Pushbar mobile menu */
[data-theme="dark"] .pushbar.from_right {
    background-color: var(--bg-header);
}
[data-theme="dark"] .full-screen-menu {
    background-color: var(--bg-header);
}

/* Search bar */
[data-theme="dark"] #top-search form {
    background: var(--bg-surface-alt);
}
[data-theme="dark"] #searchCollapse {
    background-color: var(--bg-surface);
}

/* Browse/listing items */
[data-theme="dark"] .browse-item {
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

/* Cards specific */
[data-theme="dark"] .card-search a {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .card-title a {
    color: var(--text-heading);
}
[data-theme="dark"] .card-title a:hover {
    color: var(--color-primary);
}

/* My Municibid sidebar */
[data-theme="dark"] .container-mymunicibid {
    background: var(--bg-body);
}
/* Sidebar wrapper takes the page bg so the 20px gap between stacked
   .mymunicibid-panels exposes the darker page color, not a lighter
   band. Panels stay on --bg-surface so each section still reads as a
   distinct card, separated by a dark-blue bg-body strip. */
[data-theme="dark"] .mymunicibid {
    background: var(--bg-body);
}
[data-theme="dark"] .mymunicibid-panel {
    background: var(--bg-surface);
}
/* Color cascades from <li> → both icon (currentColor) and <a> (inherit) in the base
   CategoryList styles. Dark mode just swaps those values via the same cascade. */
[data-theme="dark"] .nav-mymunicibid > li {
    color: var(--text-primary);
}
[data-theme="dark"] .nav-mymunicibid > li.active {
    color: var(--color-primary) !important;
    border-left-color: var(--color-primary);
}
[data-theme="dark"] .nav-mymunicibid > li:hover {
    color: var(--color-primary);
    background-color: var(--bg-surface-hover);
}

/* Form inline (My Municibid filter) */
[data-theme="dark"] .form-inline-mm {
    background: var(--bg-muted);
    box-shadow: var(--shadow-sm);
}

/* Invoice/payment sections */
[data-theme="dark"] .addpaymentsection {
    background: var(--bg-muted);
    border-color: var(--border-color);
}
[data-theme="dark"] .invoice-additems {
    background-color: var(--bg-surface-alt);
    color: var(--text-primary);
}
[data-theme="dark"] .footer-confirm {
    background: var(--bg-surface-alt);
    border-color: var(--border-color);
}

/* MM listings */
[data-theme="dark"] .mm-listings {
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
}
[data-theme="dark"] .mm-row-options {
    border-top-color: var(--border-light);
}

/* Auction details */
[data-theme="dark"] .auctiondetails {
    background: var(--bg-surface-alt);
}

/* Login form */
[data-theme="dark"] .loginform h1 {
    color: var(--text-heading);
}

/* Registration */
[data-theme="dark"] .registration h1 {
    color: var(--text-heading);
}

/* Validation errors */
[data-theme="dark"] .validation-summary-errors {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Restricted messages */
[data-theme="dark"] .restricted-message {
    background: rgba(var(--color-primary-rgb), 0.1);
}

/* Sales report */
[data-theme="dark"] .sales-report-filter {
    background: var(--bg-muted);
}
[data-theme="dark"] .salesreport-table tbody:nth-child(odd) {
    background: var(--table-stripe);
}

/* Date/Time picker */
[data-theme="dark"] .ui-widget {
    box-shadow: var(--shadow-lg) !important;
}
[data-theme="dark"] .ui-widget-content {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .ui-widget-header {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .ui-state-default {
    color: var(--text-primary);
}
[data-theme="dark"] .ui-datepicker td a:hover {
    background: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .ui-datepicker-today {
    background: var(--bg-muted) !important;
}

/* Start/End Date picker section */
[data-theme="dark"] .startenddate {
    background: var(--bg-surface-alt);
    border-color: var(--border-color);
}

/* Custom field sell borders */
[data-theme="dark"] .customfield-sell {
    border-bottom-color: var(--border-color);
}

/* Sell media box */
[data-theme="dark"] .sell-media-box {
    background: var(--bg-surface);
    border-color: var(--border-light);
}
[data-theme="dark"] .sell-media-box h2 {
    border-bottom-color: var(--border-light);
}

/* Feature boxes */
[data-theme="dark"] .feature-box.fbox-bg.fbox-center {
    background-color: var(--bg-surface);
    border-color: var(--border-card);
}

/* Profile cards (search typeahead) */
[data-theme="dark"] .ProfileCard {
    background: var(--bg-surface);
}
[data-theme="dark"] .ProfileCard:hover,
[data-theme="dark"] .ProfileCard.is-active {
    background: var(--bg-surface-hover);
    color: var(--text-heading);
}

/* Typeahead menu */
[data-theme="dark"] .Typeahead-menu {
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .Typeahead-selectable + .Typeahead-selectable {
    border-top-color: var(--border-color);
}

/* Browse viewbox borders */
[data-theme="dark"] .viewbox {
    border-left-color: var(--border-color);
}
[data-theme="dark"] .divider-end {
    border-right-color: var(--border-color);
}

/* Listing detail title bar — 'Listing # 82009441 · location · agency' */
html[data-theme="dark"] .subTitleText {
    color: #cbd5e1;
}
html[data-theme="dark"] .subTitleText .separator {
    color: #3a5068;
}
html[data-theme="dark"] .listing-number strong {
    color: #cbd5e1;
}

/* "Our Buyers Fees" info modal — boxes inside the modal ship with
   light gray / pale yellow backgrounds that become illegible in dark
   mode. Retint to match the theme. */
html[data-theme="dark"] .fees-example-box {
    background: #1a2738 !important;
    color: #e8edf2 !important;
    border: 1px solid #1f2d3d;
}
html[data-theme="dark"] .fees-example-box b,
html[data-theme="dark"] .fees-example-box strong,
html[data-theme="dark"] .fees-example-box li,
html[data-theme="dark"] .fees-example-box p,
html[data-theme="dark"] .fees-example-box h5 {
    color: #e8edf2 !important;
}
html[data-theme="dark"] .fees-warning-box {
    background: rgba(255, 193, 7, 0.08) !important;
    border-left-color: #ffc107 !important;
    color: #fde68a !important;
}
html[data-theme="dark"] .fees-warning-box b,
html[data-theme="dark"] .fees-warning-box strong,
html[data-theme="dark"] .fees-warning-box p {
    color: #fde68a !important;
}
html[data-theme="dark"] #FeesModal .modal-body hr {
    border-top-color: #1f2d3d !important;
}
html[data-theme="dark"] #FeesModal .modal-body,
html[data-theme="dark"] #FeesModal .modal-body p,
html[data-theme="dark"] #FeesModal .modal-body li,
html[data-theme="dark"] #FeesModal .modal-body h4,
html[data-theme="dark"] #FeesModal .modal-body h5,
html[data-theme="dark"] #FeesModal .modal-body strong,
html[data-theme="dark"] #FeesModal .modal-body b {
    color: #e8edf2;
}
html[data-theme="dark"] #FeesModal .table-bordered,
html[data-theme="dark"] #FeesModal .table-bordered td,
html[data-theme="dark"] #FeesModal .table-bordered th {
    border-color: #1f2d3d !important;
    color: #e8edf2 !important;
    background: transparent !important;
}

/* Item Description — strip inline backgrounds/colors from seller-pasted
   HTML (Word/Excel paste bakes in style="background-color: white; color: black")
   so the text is readable on the dark surface. */
html[data-theme="dark"] .heading-itempage [style*="background-color"],
html[data-theme="dark"] .heading-itempage [style*="background:"],
html[data-theme="dark"] .heading-itempage [style*="background :"] {
    background: transparent !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .heading-itempage [style*="color:#000"],
html[data-theme="dark"] .heading-itempage [style*="color: #000"],
html[data-theme="dark"] .heading-itempage [style*="color:#1"],
html[data-theme="dark"] .heading-itempage [style*="color: #1"],
html[data-theme="dark"] .heading-itempage [style*="color:#2"],
html[data-theme="dark"] .heading-itempage [style*="color: #2"],
html[data-theme="dark"] .heading-itempage [style*="color:#3"],
html[data-theme="dark"] .heading-itempage [style*="color: #3"],
html[data-theme="dark"] .heading-itempage [style*="color:black"],
html[data-theme="dark"] .heading-itempage [style*="color: black"],
html[data-theme="dark"] .heading-itempage [style*="color:rgb(0"],
html[data-theme="dark"] .heading-itempage [style*="color: rgb(0"] {
    color: inherit !important;
}

/* Viewbox chip (Ends in) + VIEW button — dark mode legibility */
html[data-theme="dark"] .viewbox-timer {
    background: rgba(90, 176, 224, 0.12) !important;
    border: 1px solid rgba(90, 176, 224, 0.25);
}
html[data-theme="dark"] .viewbox-label {
    color: #5ab0e0 !important;
}
html[data-theme="dark"] .viewbox-time {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .viewbox-ended-label {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .viewbox-ended-date {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .btn.btn-viewbox,
html[data-theme="dark"] a.btn.btn-viewbox {
    background: #3586BB !important;
    border-color: #3586BB !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    opacity: 1 !important;
}
html[data-theme="dark"] .btn.btn-viewbox:hover,
html[data-theme="dark"] a.btn.btn-viewbox:hover {
    background: #4a9fd4 !important;
    border-color: #4a9fd4 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(74, 159, 212, 0.4);
}
/* Ended / outline variants */
html[data-theme="dark"] .btn.btn-outline-secondary.btn-viewbox {
    background: transparent !important;
    border-color: #2a3f54 !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .btn.btn-outline-secondary.btn-viewbox:hover {
    background: #1f2d3d !important;
    border-color: #3a5068 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .btn.btn-success.btn-viewbox {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

/* Location panel */
[data-theme="dark"] .locationpanel {
    border-bottom-color: var(--border-color);
}

/* Item page sections — flat background matching the body so the listing
   detail doesn't render as stacked lighter bands. */
[data-theme="dark"] .heading-itempage {
    background: transparent !important;
    border-top-color: var(--border-color);
}
[data-theme="dark"] .section-item {
    background-color: transparent !important;
    border-bottom-color: var(--border-color);
}

/* Bid form */
[data-theme="dark"] .form-control-bid {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-heading);
}
[data-theme="dark"] .form-control-bid:focus {
    background: var(--bg-input);
}

/* Scrollbar styling */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3a5570;
}

/* Selection color */
[data-theme="dark"] ::selection {
    background: var(--selection-bg);
    color: var(--text-heading);
}

/* Images - subtle adjustment for dark backgrounds */
[data-theme="dark"] .img-thumbnail {
    border-color: var(--border-color);
    background-color: var(--bg-surface);
}

/* Inline color overrides for common patterns in .cshtml views */
[data-theme="dark"] [style*="color: #999"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color:#999"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color: #555"] {
    color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color:#555"] {
    color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="background-color: #f8f9fa"] {
    background-color: var(--bg-surface-alt) !important;
}
[data-theme="dark"] [style*="background-color: #f8f7f7"] {
    background-color: var(--bg-surface-alt) !important;
}
[data-theme="dark"] [style*="background-color: white"] {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] [style*="background-color: #fff"] {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] [style*="background-color:#fff"] {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] [style*="border-color:#ccc"] {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] [style*="border-color: #ccc"] {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] [style*="color: #3586BB"] {
    color: var(--text-link) !important;
}
[data-theme="dark"] [style*="color:#3586BB"] {
    color: var(--text-link) !important;
}

/* Footer specific text overrides */
[data-theme="dark"] .responsive-footer [style*="color:#CCCCCC"] {
    color: var(--footer-text) !important;
}
[data-theme="dark"] .responsive-footer [style*="color:#46A9E9"] {
    color: var(--footer-link) !important;
}
[data-theme="dark"] .responsive-footer [style*="color: #46A9E9"] {
    color: var(--footer-link) !important;
}
[data-theme="dark"] .responsive-footer hr[style*="border-color:#555"] {
    border-color: var(--footer-hr) !important;
}

/* ============================================================
   COMPREHENSIVE DARK MODE FIXES — Phase 2
   ============================================================ */

/* ---- Global catch-all for remaining white/light backgrounds ---- */
[data-theme="dark"] .bg-white,
[data-theme="dark"] [class*="bg-white"] {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] .bg-light,
[data-theme="dark"] [class*="bg-light"] {
    background-color: var(--bg-surface-alt) !important;
}

/* ---- Body and main wrappers ---- */
[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] html {
    background-color: var(--bg-body) !important;
    color: var(--text-primary);
}
[data-theme="dark"] .Site-content,
[data-theme="dark"] .site-content,
[data-theme="dark"] .sitewrap {
    background-color: var(--bg-body);
}

/* ---- All paragraphs, spans, divs inherit text color ---- */
[data-theme="dark"] p,
[data-theme="dark"] span:not([class*="badge"]):not([class*="label"]):not([class*="status"]),
[data-theme="dark"] div,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label,
[data-theme="dark"] small {
    color: inherit;
}

/* ---- Force headings to be visible ---- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-heading) !important;
}
/* Exception: headings on colored backgrounds */
[data-theme="dark"] .alert h1,
[data-theme="dark"] .alert h2,
[data-theme="dark"] .postauctionstatus h1,
[data-theme="dark"] .sell-header h1,
[data-theme="dark"] .itempage-account h1,
[data-theme="dark"] .itempage-creditcard h1,
[data-theme="dark"] .card-kts-header h5,
[data-theme="dark"] .card-kts-header h6,
[data-theme="dark"] .card-header-sell h2,
[data-theme="dark"] .heading-mm-buyerinvoice h1,
[data-theme="dark"] .hero-contact h1,
[data-theme="dark"] .intro-block h1,
[data-theme="dark"] .intro-block h2,
[data-theme="dark"] .auctionalert h1,
[data-theme="dark"] .auctionalert h2,
[data-theme="dark"] .auctionalert h3,
[data-theme="dark"] .aa-keyword h1,
[data-theme="dark"] .aa-keyword h3,
[data-theme="dark"] .itempage-postbid-status h1,
[data-theme="dark"] .itempage-postbid-status h2,
[data-theme="dark"] .postauctionstatus-end h1 {
    color: #fff !important;
}

/* ---- Links everywhere ---- */
[data-theme="dark"] a:not([class*="btn"]):not([class*="nav-link"]):not([class*="dropdown"]):not(.sell-button) {
    color: var(--text-link);
}
[data-theme="dark"] a:not([class*="btn"]):not([class*="nav-link"]):not([class*="dropdown"]):not(.sell-button):hover {
    color: var(--text-link-hover);
}

/* ---- All inputs, selects, textareas ---- */
[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .custom-file-label {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-placeholder) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .form-control:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 0.2rem var(--focus-ring) !important;
}

/* ---- All cards and panels comprehensive ---- */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .card-body,
[data-theme="dark"] .panel-body {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary);
}
[data-theme="dark"] .card-footer {
    background-color: var(--bg-surface) !important;
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .card-header {
    background-color: var(--bg-surface-alt) !important;
    border-bottom-color: var(--border-color) !important;
}

/* ---- Tables comprehensive ---- */
[data-theme="dark"] table,
[data-theme="dark"] .table {
    color: var(--text-primary);
    background-color: transparent;
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-color) !important;
    color: var(--text-heading);
}
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody th {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .table-bordered {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: var(--border-color) !important;
}

/* ---- Dropdown menus (non-navbar) ---- */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .dropdown-menu.about {
    background-color: var(--bg-dropdown) !important;
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-surface-hover) !important;
    color: var(--text-heading) !important;
}
[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-color) !important;
}

/* ---- Modals ---- */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-heading);
}
[data-theme="dark"] .modal-body {
    color: var(--text-primary);
}
[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.85);
    background-image: none !important;
}
[data-theme="dark"] .modalContentValidation {
    background: var(--bg-surface) !important;
    color: var(--text-primary);
}

/* ---- All list-group-items ---- */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

/* ---- Pagination fix ---- */
[data-theme="dark"] .pagination li a {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .pagination li a:hover {
    background-color: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .pagination li.active a {
    background-color: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ---- Breadcrumbs ---- */
[data-theme="dark"] #breadcrumb > ul {
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
}
[data-theme="dark"] #breadcrumb > ul a {
    color: var(--text-link);
}
[data-theme="dark"] #breadcrumb-item > ul {
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-sm);
}

/* ---- Browse page ---- */
[data-theme="dark"] .browse-item {
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .viewbox {
    background: transparent !important;
    border-left-color: var(--border-color) !important;
}

/* ---- Location/category panels ---- */
[data-theme="dark"] .locationpanel {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .accordion-inner:hover {
    background: transparent !important;
}
[data-theme="dark"] .categories > li:hover {
    background: transparent !important;
}

/* Homepage sidebar: make Categories list items match the "Locations" white
   (override the global [data-theme="dark"] a blue link color) */
[data-theme="dark"] .categories a,
[data-theme="dark"] .categories > li > a,
[data-theme="dark"] #partial-category a,
[data-theme="dark"] #partial-location a,
[data-theme="dark"] .locationpanel .list-group a {
    color: #e8edf2 !important;
}
[data-theme="dark"] .categories a:hover,
[data-theme="dark"] #partial-category a:hover,
[data-theme="dark"] #partial-location a:hover {
    color: #ffffff !important;
}

/* Homepage auction card titles: "1998 Classic Chevrolet 3522..." etc.
   Currently render as blue link — make them white to match */
[data-theme="dark"] .listing-title,
[data-theme="dark"] .listing-title-link,
[data-theme="dark"] .listing-title a,
[data-theme="dark"] .listing-title .listing-title-link {
    color: #e8edf2 !important;
}
[data-theme="dark"] .listing-title-link:hover,
[data-theme="dark"] .listing-title a:hover {
    color: #ffffff !important;
}

/* Homepage section headers: "Popular Auctions", "Auctions Ending Soon", etc. */
[data-theme="dark"] .section-header .sh-title,
[data-theme="dark"] .section-header .sh-title a {
    color: #e8edf2 !important;
}
[data-theme="dark"] .section-header .sh-title a:hover {
    color: #ffffff !important;
}

/* Seller home page "My Stats" panel */
html[data-theme="dark"] .stats-panel {
    background: #162231 !important;
    border-color: #2a3f54 !important;
}
html[data-theme="dark"] .stats-item + .stats-item {
    border-left-color: #2a3f54 !important;
}
html[data-theme="dark"] .stats-item {
    border-top-color: #2a3f54 !important;
}
html[data-theme="dark"] .stats-label {
    color: #b8c5d4 !important;
}
html[data-theme="dark"] .stats-value {
    color: #ffffff !important;
}
html[data-theme="dark"] .btn-store {
    background: #3586BB !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .btn-store:hover,
html[data-theme="dark"] .btn-store:focus {
    background: #2a6d99 !important;
    color: #ffffff !important;
}
/* Home body cards — keep dark, remove white defaults */
html[data-theme="dark"] .home-body-card,
html[data-theme="dark"] .home-body-row {
    background: transparent !important;
}

/* ============================================
   Bidder Registration form — "Create Your Bidding Account"
   ============================================ */
html[data-theme="dark"] .registration-form label,
html[data-theme="dark"] .registration-form .form-group label {
    color: #e8edf2 !important;
    font-weight: 600 !important;
}
html[data-theme="dark"] .registration-form .form-control,
html[data-theme="dark"] .registration-form .form-control-registration,
html[data-theme="dark"] .registration-form input[type="text"],
html[data-theme="dark"] .registration-form input[type="email"],
html[data-theme="dark"] .registration-form input[type="password"],
html[data-theme="dark"] .registration-form input[type="tel"] {
    background: #1a2940 !important;
    border: 1px solid #3a5570 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .registration-form .form-control::placeholder,
html[data-theme="dark"] .registration-form .form-control-registration::placeholder,
html[data-theme="dark"] .registration-form input::placeholder {
    color: #b8c5d4 !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .registration-form .form-control:focus,
html[data-theme="dark"] .registration-form .form-control-registration:focus {
    background: #1f3048 !important;
    border-color: #4a9fd4 !important;
    box-shadow: 0 0 0 3px rgba(74, 159, 212, 0.2) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .registration-form .Small-Error,
html[data-theme="dark"] .registration-form .password-requirements,
html[data-theme="dark"] .registration-form .password-strength-text,
html[data-theme="dark"] .registration-form small {
    color: #c4d0dd !important;
}
html[data-theme="dark"] .registration-form .Small-Error {
    color: #f87171 !important;
}
html[data-theme="dark"] .registration-form .password-strength-bar {
    background-color: #2a3f54 !important;
}
/* Hero banner overlay — keep readable */
html[data-theme="dark"] .hero-register-bidder,
html[data-theme="dark"] .hero-home {
    background-blend-mode: multiply;
}
html[data-theme="dark"] .hero-home h1,
html[data-theme="dark"] .hero-home h2,
html[data-theme="dark"] .hero-home .about-hero {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
/* Agreement / footer buttons */
html[data-theme="dark"] .agreements-label,
html[data-theme="dark"] .agreements-label label,
html[data-theme="dark"] .agreements-label a {
    color: #e8edf2 !important;
}
html[data-theme="dark"] .agreements-label a {
    color: #5ab0e0 !important;
    text-decoration: underline;
}
/* Submit button "Create An Account" */
html[data-theme="dark"] #SubmitBtn,
html[data-theme="dark"] .registration-form .registerbutton .btn,
html[data-theme="dark"] .registration-form .btn-primary {
    background: #3586BB !important;
    border-color: #3586BB !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
html[data-theme="dark"] #SubmitBtn:hover,
html[data-theme="dark"] .registration-form .btn-primary:hover {
    background: #2a6d99 !important;
    border-color: #2a6d99 !important;
}
/* Validate Number / Verify buttons — inline-style border overridden */
html[data-theme="dark"] #SendCodeBtn,
html[data-theme="dark"] #VerifyCodeBtn,
html[data-theme="dark"] .registration-form .btn-outline-primary,
html[data-theme="dark"] .registration-form .btn-outline-success {
    color: #ffffff !important;
    border: 2px solid #4a9fd4 !important;
    background: rgba(74, 159, 212, 0.2) !important;
    font-weight: 700 !important;
}
html[data-theme="dark"] #SendCodeBtn:hover,
html[data-theme="dark"] #VerifyCodeBtn:hover,
html[data-theme="dark"] .registration-form .btn-outline-primary:hover,
html[data-theme="dark"] .registration-form .btn-outline-success:hover {
    background: #4a9fd4 !important;
    border-color: #4a9fd4 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #SendCodeBtn:disabled,
html[data-theme="dark"] .registration-form .btn-outline-primary:disabled {
    color: #b8c5d4 !important;
    border-color: #3a5570 !important;
    background: rgba(74, 159, 212, 0.08) !important;
    opacity: 0.7 !important;
}
/* Alert bar at bottom "Hands-up..." */
html[data-theme="dark"] .registration-form-alertbidder {
    background: rgba(74, 159, 212, 0.12) !important;
    border: 1px solid rgba(74, 159, 212, 0.3) !important;
    color: #e8edf2 !important;
}
html[data-theme="dark"] .registration-form-alertbidder a {
    color: #5ab0e0 !important;
}

/* Homepage card meta labels/values: "Bids 80", "Current Bid $7,300.00" —
   increase contrast so they are readable on dark background */
[data-theme="dark"] .meta-block .meta-label,
[data-theme="dark"] .meta-label {
    color: #e8edf2 !important;
}
[data-theme="dark"] .meta-block .meta-value,
[data-theme="dark"] .meta-value {
    color: #ffffff !important;
}

/* Sign In button in top nav — keep white text in dark mode
   (global [data-theme="dark"] a rule turns links blue otherwise) */
[data-theme="dark"] .btn-custom-signin,
[data-theme="dark"] a.btn-custom-signin {
    color: #ffffff !important;
    border-color: #ffffff !important;
}
[data-theme="dark"] .btn-custom-signin:hover,
[data-theme="dark"] a.btn-custom-signin:hover {
    color: #FFC637 !important;
    border-color: #FFC637 !important;
}

/* "Expand" button next to Locations heading — white text + white border */
[data-theme="dark"] .location-panel-head .show-close-all,
[data-theme="dark"] .location-panel-head .btn-showseller,
[data-theme="dark"] .show-close-all.btn-outline-primary {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: transparent !important;
}
[data-theme="dark"] .location-panel-head .show-close-all:hover,
[data-theme="dark"] .location-panel-head .btn-showseller:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Sidebar count badges — soft light numbers, readable but not glaring.
   Uses html[data-theme="dark"] to outweigh inline partial overrides. */
html[data-theme="dark"] .locationpanel .category-badge__container .badge,
html[data-theme="dark"] .locationpanel .badge,
html[data-theme="dark"] .categories .category-badge__container .badge,
html[data-theme="dark"] .category-badge__container .badge,
html[data-theme="dark"] .browse-locationcatpanel .badge,
html[data-theme="dark"] #partial-location .badge,
html[data-theme="dark"] #partial-category .badge,
html[data-theme="dark"] .categories .badge,
html[data-theme="dark"] .count-badge,
html[data-theme="dark"] span.count-badge {
    color: #d4dce6 !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: none !important;
    font-weight: 600 !important;
}

/* Homepage Locations panel: Bootstrap .list-group-item has background #fff
   which makes the whole panel white on dark mode. Override it. */
[data-theme="dark"] #partial-location .list-group-item,
[data-theme="dark"] #partial-location li.list-group-item,
[data-theme="dark"] .locationpanel .list-group-item,
[data-theme="dark"] .locationpanel ul.list-group > li {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #e8edf2 !important;
}
[data-theme="dark"] #partial-location .list-group-item:hover,
[data-theme="dark"] .locationpanel .list-group-item:hover,
[data-theme="dark"] .locationpanel ul.list-group > li:hover {
    background-color: transparent !important;
}
/* Parent ul should also be dark */
[data-theme="dark"] .locationpanel ul.list-group,
[data-theme="dark"] #partial-location,
[data-theme="dark"] #partial-location.list-group,
[data-theme="dark"] .locationpanel .nav.nav-pills {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* ---- Typeahead/search ---- */
[data-theme="dark"] .ProfileCard {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] .ProfileCard:hover,
[data-theme="dark"] .ProfileCard.is-active {
    background: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .Typeahead-menu {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] .Typeahead-selectable + .Typeahead-selectable {
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .empty-message {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] .tt-dataset {
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ---- My Municibid (Account) ---- */
[data-theme="dark"] .container-mymunicibid {
    background: var(--bg-body) !important;
}
[data-theme="dark"] .mymunicibid-panel-main {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] .mymunicibid-panel {
    background: var(--bg-surface) !important;
}
/* Sidebar wrapper uses the darker page bg so the 20px gaps between
   stacked panels show as dark strips, matching the rest of the page
   background rather than a lighter surface band. */
[data-theme="dark"] .mymunicibid {
    background: var(--bg-body) !important;
}
[data-theme="dark"] .form-inline-mm {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .mm-listings {
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-sm) !important;
}
[data-theme="dark"] .mm-row-options {
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .nav-mymunicibid > li {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .nav-mymunicibid > li.active {
    color: var(--color-primary) !important;
    border-left-color: var(--color-primary) !important;
}
[data-theme="dark"] .nav-mymunicibid > li:hover,
[data-theme="dark"] .nav-mymunicibid > li:focus {
    color: var(--color-primary) !important;
    background-color: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .mymunicibid-breadcrumb {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .watching-none {
    background: var(--bg-surface) !important;
}

/* ---- Invoices / Payment ---- */
[data-theme="dark"] .paymenthistory {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .buyercomments {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .addpaymentsection {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .invoice-additems {
    background-color: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .footer-confirm {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .mm-bidder-invoices {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .mm-bidder-invoices-list {
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .row-invoice-sales {
    border-bottom-color: var(--border-color) !important;
}

/* ---- Item/Listing page ---- */
[data-theme="dark"] .heading-itempage {
    background: transparent !important;
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .section-item {
    background-color: transparent !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .auctiondetails {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .maxbid {
    background: var(--bg-surface-alt) !important;
    border-left-color: var(--color-primary) !important;
}
[data-theme="dark"] .form-control-bid {
    background: var(--bg-input) !important;
    color: var(--text-heading) !important;
    border-color: var(--border-input) !important;
}
[data-theme="dark"] .form-control-bid:focus {
    background: var(--bg-input) !important;
}
[data-theme="dark"] .confirmbody .agreement {
    background: var(--bg-surface) !important;
}

/* ---- Sell / Create Listing ---- */
[data-theme="dark"] .sell-media {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] .sell-media-box {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .startenddate {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .customfield-sell {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .section-sell {
    background-color: var(--bg-surface-alt) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .section-sell-create {
    background: var(--bg-surface) !important;
}

/* ---- Feature boxes ---- */
[data-theme="dark"] .feature-box.fbox-bg.fbox-center {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
}

/* ---- Registration ---- */
[data-theme="dark"] .registration-form-alertbidder {
    background: var(--color-primary) !important;
}
[data-theme="dark"] .verification-stepbox {
    background: var(--bg-surface-alt) !important;
}

/* ---- About page ---- */
[data-theme="dark"] .about-sellinfo {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .DNM {
    background: var(--bg-surface-alt) !important;
}

/* ---- Date/Time pickers ---- */
[data-theme="dark"] .ui-widget-content {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .ui-datepicker td a:hover {
    background: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .ui-datepicker-today {
    background: var(--bg-muted) !important;
}
[data-theme="dark"] #ptTimeSelectCntr #ptTimeSelectSetButton a {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] #ptTimeSelectCntr #ptTimeSelectSetButton a:hover {
    background: var(--bg-surface-hover) !important;
}

/* ---- Sales report ---- */
[data-theme="dark"] .sales-report-filter {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .salesreport-table tbody:nth-child(odd) {
    background: var(--table-stripe) !important;
}

/* ---- Alert info ---- */
[data-theme="dark"] .alert-info-message {
    background-color: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
}

/* ---- Top links / top bar ---- */
[data-theme="dark"] #top-bar {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .top-links li > a {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .top-links ul ul,
[data-theme="dark"] .top-links ul div.top-link-section {
    background: var(--bg-surface) !important;
    border-bottom-color: var(--border-color) !important;
}

/* ---- Advanced search ---- */
[data-theme="dark"] .advsearch {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .advsearch-section {
    background: var(--bg-surface) !important;
    border-bottom-color: var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .advsearch-form {
    background: var(--bg-surface-alt) !important;
}

/* ---- Search collapse ---- */
[data-theme="dark"] #searchCollapse,
[data-theme="dark"] .searchitem {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] #top-search form {
    background: var(--bg-surface-alt) !important;
}

/* ---- Account cards (My Municibid modern cards) ---- */
[data-theme="dark"] .mm-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
}
[data-theme="dark"] .mm-card:hover {
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

/* ---- Bid timeline modal ---- */
[data-theme="dark"] .bid-timeline-modal .modal-content {
    background-color: var(--bg-surface) !important;
}

/* ---- Image thumbnails on dark bg ---- */
[data-theme="dark"] .img-thumbnail {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

/* ---- Contact page ---- */
[data-theme="dark"] .contactus-section {
    color: var(--text-primary);
}
[data-theme="dark"] .contactus-section i {
    color: var(--text-secondary) !important;
}

/* ---- Login form ---- */
[data-theme="dark"] .loginform {
    color: var(--text-primary);
}

/* ---- Forgot password ---- */
[data-theme="dark"] .showpassword {
    background: var(--bg-muted) !important;
    color: var(--text-secondary) !important;
}

/* ---- Pushbar overlay ---- */
[data-theme="dark"] .pushbar_overlay {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* ---- Article backgrounds ---- */
[data-theme="dark"] article {
    background: var(--bg-surface) !important;
}

/* ---- Validation summary ---- */
[data-theme="dark"] .validation-summary-errors {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

/* ---- Index page dropdowns (location/category panels) ---- */
[data-theme="dark"] .dropList.dropdown-menu {
    background-color: var(--bg-surface) !important;
}

/* ---- Inline style overrides — expanded coverage ---- */
[data-theme="dark"] [style*="background-color: #f0f0f0"],
[data-theme="dark"] [style*="background-color:#f0f0f0"] {
    background-color: var(--bg-surface-alt) !important;
}
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background-color:#f8f9fa"],
[data-theme="dark"] [style*="background-color: #f8f7f7"],
[data-theme="dark"] [style*="background-color:#f8f7f7"] {
    background-color: var(--bg-surface-alt) !important;
}
[data-theme="dark"] [style*="background: #f3f3f3"],
[data-theme="dark"] [style*="background:#f3f3f3"],
[data-theme="dark"] [style*="background: #fdeabe"],
[data-theme="dark"] [style*="background:#fdeabe"],
[data-theme="dark"] [style*="background: #f9f4e1"],
[data-theme="dark"] [style*="background:#f9f4e1"],
[data-theme="dark"] [style*="background: #f1f1f1"],
[data-theme="dark"] [style*="background:#f1f1f1"] {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#374151"] {
    color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6b7280"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color: #9ca3af"],
[data-theme="dark"] [style*="color:#9ca3af"] {
    color: var(--text-muted) !important;
}
[data-theme="dark"] [style*="color: #5a6169"],
[data-theme="dark"] [style*="color:#5a6169"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="color: #94a3b8"] {
    color: var(--text-muted) !important;
}
[data-theme="dark"] [style*="border: 1px solid #ccc"],
[data-theme="dark"] [style*="border:1px solid #ccc"],
[data-theme="dark"] [style*="border-color: #ccc"],
[data-theme="dark"] [style*="border-color:#ccc"],
[data-theme="dark"] [style*="border-color: #CCC"],
[data-theme="dark"] [style*="border-color:#CCC"] {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] [style*="border: 1px solid #eee"],
[data-theme="dark"] [style*="border:1px solid #eee"] {
    border-color: var(--border-light) !important;
}
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"] {
    color: var(--text-heading) !important;
}
[data-theme="dark"] [style*="background:#fff3cd"] {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] [style*="color:#856404"] {
    color: var(--color-warning) !important;
}
[data-theme="dark"] [style*="border:1px solid #ffc107"] {
    border-color: var(--color-warning) !important;
}

/* ---- Homepage hero/welcome sections ---- */
[data-theme="dark"] .welcome:before,
[data-theme="dark"] .browseForSeller:before {
    background-image: linear-gradient(to bottom, var(--bg-body) 0%, rgba(15, 25, 35, 0.9) 100%) !important;
}

/* ---- DNM (Deals Near Me) ---- */
[data-theme="dark"] .DNM-cat {
    background-image: var(--gradient-subtle) !important;
}

/* ---- Stripe card element ---- */
[data-theme="dark"] #stripe-card-element,
[data-theme="dark"] #card-element {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
}

/* ---- Label reserve ---- */
[data-theme="dark"] .label-reserve {
    background-color: var(--bg-muted) !important;
    color: var(--text-secondary) !important;
}

/* ---- Custom select controls ---- */
[data-theme="dark"] .custom-file-control-browse {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .form-control-mm-sort,
[data-theme="dark"] .form-control-mm-salesreport {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

/* ---- Prevent white flash on page transitions ---- */
[data-theme="dark"] #wrapper,
[data-theme="dark"] main,
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    background-color: inherit;
}

/* ============================================================
   LISTING DETAIL PAGE — Dark Mode
   ============================================================ */

/* Auction action box area — flat with the body (no lighter panel bg). */
[data-theme="dark"] .auctionbuybox,
[data-theme="dark"] .auctionbox,
[data-theme="dark"] .panel-body-item,
[data-theme="dark"] .panel-item {
    background-color: transparent !important;
    color: var(--text-primary);
}
[data-theme="dark"] .auctionText {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .auctiontimeEndingText {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .CurrentPriceStyle {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .currentbid h3 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .auctionInfoText {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .badgeText {
    background: var(--bg-surface) !important;
    color: var(--color-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .bidboxhr {
    border-top-color: var(--border-color) !important;
}

/* Seller section in auction box */
[data-theme="dark"] .seller-title {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .seller-title .seller-loc {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .seller-link {
    color: var(--text-link) !important;
}
[data-theme="dark"] .sellerAuctionsContain {
    border-left-color: var(--color-primary) !important;
}

/* Proxy bid card */
[data-theme="dark"] .proxy-bid-pill {
    background: rgba(74, 159, 212, 0.15) !important;
    color: var(--color-primary) !important;
}
[data-theme="dark"] .proxy-bid-label {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .proxy-bid-amount {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .proxy-bid-hint {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .proxy-bid-value {
    color: var(--color-primary) !important;
}

/* Listing page title area */
[data-theme="dark"] .page-title-item {
    color: var(--text-primary);
}
[data-theme="dark"] .page-title-item h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .page-title-item h2 {
    color: var(--text-secondary) !important;
}

/* Image gallery area */
[data-theme="dark"] .everslider {
    background-color: var(--bg-surface);
}
[data-theme="dark"] img.full {
    border-radius: 0.25rem;
}

/* Bid form area — keep the brand green pill around the $ prefix
   identical to light mode (solid green bg, white $, no jarring border). */
[data-theme="dark"] .input-group-addonbid,
[data-theme="dark"] .dollarColor,
[data-theme="dark"] span.input-group-addon.input-group-addonbid.dollarColor {
    background: #17c671 !important;
    border: 1px solid #17c671 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .btnQuickbid {
    background-color: var(--bg-surface-alt) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

/* Auction details section */
[data-theme="dark"] .table-auctiondetails > tbody > tr > td,
[data-theme="dark"] .table-auctiondetails > thead > tr > td,
[data-theme="dark"] .table-auctiondetails > thead > tr > th {
    border-top-color: var(--border-color) !important;
}

/* Q&A section */
[data-theme="dark"] .table-q\&a {
    color: var(--text-primary);
}

/* Post auction status - these keep their brand colors but need text visible */
[data-theme="dark"] .postauctionstatus-end {
    color: var(--text-on-primary);
}

/* Item page account/credit card call-to-action boxes */
[data-theme="dark"] .itempage-account {
    background: var(--bg-header) !important;
}
[data-theme="dark"] .itempage-creditcard {
    background: var(--color-primary) !important;
}

/* Follow button */
[data-theme="dark"] .follow-btn {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .follow-btn:hover {
    color: var(--color-primary) !important;
}

/* "Want to bid" section (already has bg brand color, text is white - fine) */

/* Inline style overrides for listing detail */
[data-theme="dark"] [style*="color:#214964"] {
    color: var(--color-primary) !important;
}
[data-theme="dark"] [style*="color: #214964"] {
    color: var(--color-primary) !important;
}
[data-theme="dark"] [style*="color:#475569"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color: #475569"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color:#dc2626"] {
    color: var(--color-danger) !important;
}

/* Browse page listing card hover */
[data-theme="dark"] .browse-info h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .browse-info h2 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .browse-info h2 > span:not(.nocolor):not(.badge) {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .browse-info-agency {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .product-desc {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] .product-title {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .product-title h3 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .product-price {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .portfolio-desc h3 a {
    color: var(--text-heading) !important;
}

/* ---- Homepage sections ---- */
[data-theme="dark"] .home-body-header h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .home-body-header h1 a {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .home-body-header h1 a:hover {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .display-4 {
    color: var(--text-heading);
}

/* ---- About page heading ---- */
[data-theme="dark"] .welcome-about-heading {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .about-main h1 {
    color: var(--text-heading) !important;
}

/* ---- Error page ---- */
[data-theme="dark"] .errorpage-message h1 {
    color: var(--text-heading) !important;
}

/* ---- Create listing ---- */
[data-theme="dark"] .createlisting h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .edit-header h1 {
    color: var(--text-heading) !important;
}

/* ---- Registration ---- */
[data-theme="dark"] .registration h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .registration-form h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .registration-form h2 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .verification h1,
[data-theme="dark"] .verification h2 {
    color: var(--text-heading) !important;
}

/* ---- My Municibid headings ---- */
[data-theme="dark"] .mm-heading h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .mymunicibid-heading h3 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .watching h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .mm-listings h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .invoice-total h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .invoice-comments h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .sales-report h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .notification-details h1 {
    color: var(--text-heading) !important;
}

/* ---- Category/location browse headings ---- */
[data-theme="dark"] .category-head h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .location-panel-head h2 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .accordion-heading a {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .accordion-inner a {
    color: var(--text-link) !important;
}

/* ---- Confirmbid section ---- */
[data-theme="dark"] .confirmbid h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .confirmbid h2 {
    color: var(--text-heading) !important;
}

/* ---- Scheduled auction ---- */
[data-theme="dark"] .scheduledauction h1,
[data-theme="dark"] .scheduledauction h2 {
    color: var(--text-heading) !important;
}

/* ---- Auction alert ---- */
[data-theme="dark"] .auctionalert-signin {
    background: var(--bg-surface-alt) !important;
}

/* ---- Restricted message ---- */
[data-theme="dark"] .restricted-message {
    background: rgba(var(--color-primary-rgb), 0.12) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .restricted-message h1 {
    color: var(--color-danger) !important;
}

/* ---- Badge browse ---- */
[data-theme="dark"] h6 > span:not(.nocolor) {
    color: var(--text-primary) !important;
}

/* ---- Card title link hover ---- */
[data-theme="dark"] .card-title a:hover {
    color: var(--color-primary) !important;
}

/* ---- Dividers ---- */
[data-theme="dark"] .divider:after,
[data-theme="dark"] .divider.divider-center:before,
[data-theme="dark"] .divider.divider-center.divider-short:before {
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .agencyInfo::after {
    border-bottom-color: var(--border-color) !important;
}

/* ============================================================
   LISTING DETAIL — Image Gallery & Auction Box Fixes
   ============================================================ */

/* Image container background (inline <style> in ListingDetail.cshtml) */
[data-theme="dark"] .main-image-container {
    background: transparent !important;
}

/* Gallery thumbnail hover/active border */
[data-theme="dark"] .gallery-thumbs img {
    border-color: var(--border-color);
}
[data-theme="dark"] .gallery-thumbs img:hover,
[data-theme="dark"] .gallery-thumbs img.active {
    border-color: var(--color-primary) !important;
}

/* "+" button for more images */
[data-theme="dark"] .gallery-plus {
    background: var(--bg-surface) !important;
    color: var(--text-heading) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* Navigation arrows (< >) — SVG circles with white fill */
[data-theme="dark"] .nav-left .arrow-svg circle,
[data-theme="dark"] .nav-right-image .arrow-svg circle,
[data-theme="dark"] .nav-left svg circle,
[data-theme="dark"] .nav-right-image svg circle {
    fill: var(--bg-surface) !important;
    fill-opacity: 0.85 !important;
}
[data-theme="dark"] .nav-left .arrow-svg path,
[data-theme="dark"] .nav-right-image .arrow-svg path,
[data-theme="dark"] .nav-left svg path,
[data-theme="dark"] .nav-right-image svg path {
    stroke: var(--text-heading) !important;
}

/* Fullscreen button */
[data-theme="dark"] .fullscreen-btn svg circle {
    fill: var(--bg-surface) !important;
    fill-opacity: 0.85 !important;
}
[data-theme="dark"] .fullscreen-btn svg path {
    stroke: var(--text-heading) !important;
}

/* Swiper navigation buttons (if using swiper) */
[data-theme="dark"] .swiper-button-next,
[data-theme="dark"] .swiper-button-prev {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .swiper-pagination-bullet {
    background: var(--text-muted) !important;
}
[data-theme="dark"] .swiper-pagination-bullet-active {
    background: var(--color-primary) !important;
}

/* Fancybox modal (image lightbox) */
[data-theme="dark"] .fancybox-bg {
    background: var(--bg-body) !important;
}
[data-theme="dark"] .fancybox-thumbs {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] .fancybox-thumbs__list a {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .fancybox-caption {
    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
    color: var(--text-on-primary) !important;
}

/* Auction box — force ALL text visible with max specificity */
[data-theme="dark"] .auctionText,
[data-theme="dark"] h2.auctionText,
[data-theme="dark"] .auctiontime h1,
[data-theme="dark"] .auctiontime h2,
[data-theme="dark"] h2.auctiontime,
[data-theme="dark"] .auctiontime h6,
[data-theme="dark"] h6.auctionInfoText,
[data-theme="dark"] .auctionInfoText,
[data-theme="dark"] .auctiontimeEndingText,
[data-theme="dark"] h2.auctiontimeEndingText,
[data-theme="dark"] .textContainer .auctionText,
[data-theme="dark"] .textContainer .auctiontimeEndingText,
[data-theme="dark"] .textContainer .auctionInfoText {
    color: #f0f3f6 !important;
    opacity: 1 !important;
}
[data-theme="dark"] .Bidding_Current_Price,
[data-theme="dark"] .CurrentPriceStyle,
[data-theme="dark"] span.Bidding_Current_Price,
[data-theme="dark"] span.CurrentPriceStyle,
[data-theme="dark"] .currentbid .CurrentPriceStyle {
    color: #ffffff !important;
}
[data-theme="dark"] .currentbid h3,
[data-theme="dark"] .containerBid h3 {
    color: #e8edf2 !important;
}
[data-theme="dark"] .Bidding_Listing_MinPrice {
    color: var(--text-heading) !important;
}
[data-theme="dark"] #minimumBid-div,
[data-theme="dark"] #minimumBid-div p {
    color: var(--text-primary) !important;
}

/* Reserve status text stays green */
[data-theme="dark"] .awe-rt-ReserveStatusText {
    color: var(--color-success) !important;
}

/* Bids / Buyer's Fee badges — outline on dark bg */
[data-theme="dark"] .badgeText,
[data-theme="dark"] .badge-outline-secondary.badgeText {
    background: transparent !important;
    color: var(--text-heading) !important;
    border: 1px solid var(--border-color) !important;
}
[data-theme="dark"] .badge-outline-secondary {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* "Create a Free Account" / "Sign In" buttons in auction box */
[data-theme="dark"] .itempage-account .btn-white,
[data-theme="dark"] .itempage-account .btn.btn-white {
    background: var(--bg-surface) !important;
    color: var(--color-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .itempage-account .btn-white:hover {
    background: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .itempage-account .btn-outline-white,
[data-theme="dark"] .itempage-account .btn.btn-outline-white {
    background: transparent !important;
    color: var(--text-heading) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .itempage-account .btn-outline-white:hover {
    background: var(--bg-surface-hover) !important;
    color: var(--text-heading) !important;
}
/* Override inline color:#214964 on the Create Account button */
[data-theme="dark"] .itempage-account a[style*="color:#214964"] {
    color: var(--color-primary) !important;
}

/* Global btn-white / btn-outline-white overrides */
[data-theme="dark"] .btn-white {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .btn-outline-white {
    color: var(--text-heading) !important;
    border-color: var(--border-color) !important;
}

/* AcceptedListingActionCountText (bid count number) */
[data-theme="dark"] .awe-rt-AcceptedListingActionCountText {
    color: var(--color-primary) !important;
}

/* Gallery section container */
[data-theme="dark"] .gallery {
    background-color: transparent;
}

/* Listing detail inline <style> overrides */
[data-theme="dark"] .itemPageTitles {
    color: var(--text-heading) !important;
}

/* Preview modal for images */
[data-theme="dark"] #previewModal .modal-content {
    background-color: var(--bg-body) !important;
}
[data-theme="dark"] #previewModal .swiper-container-preview {
    background: var(--bg-body) !important;
}

/* Item page description/details sections */
[data-theme="dark"] .heading-itempage h2 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .heading-itempage i {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .subtitle {
    color: var(--text-secondary) !important;
}

/* Listing data dividers */
[data-theme="dark"] .bidboxhr {
    border-top-color: var(--border-color) !important;
}

/* Contextual status messages */
[data-theme="dark"] .ContextualStatus {
    color: var(--text-primary);
}

/* Browse info agency link */
[data-theme="dark"] .browse-info-agency {
    color: var(--color-primary) !important;
}

/* ---- Bootstrap .panel-body border override ---- */
[data-theme="dark"] .panel-body {
    border: none !important;
    border-top: none !important;
    background: transparent !important;
}
[data-theme="dark"] .location-panel.panel-body,
[data-theme="dark"] .accordion-group.panel-body {
    border: none !important;
    border-top: none !important;
    background: transparent !important;
}

/* ---- Theme toggle button ---- */
.btn-theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    color: white;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}
.btn-theme-toggle:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Mobile toggle text */
.btn-theme-toggle-mobile {
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 1rem;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
}
.btn-theme-toggle-mobile:hover {
    color: var(--color-accent);
}
.btn-theme-toggle-mobile i {
    font-size: 1.1rem;
}

/* ---- Theme toggle icons (inline SVGs) ----
   Action-indicator pattern: the icon shows the mode you'll GET on click.
   Gold color so the icon pops against the dark navbar. */
.theme-icon {
    display: inline-block;
    vertical-align: middle;
}
.btn-theme-toggle svg.theme-icon,
.btn-theme-toggle-mobile svg.theme-icon {
    color: #ffffff;
}
/* Light mode currently: show MOON (click to go dark), hide sun */
.btn-theme-toggle .theme-icon-sun,
.btn-theme-toggle-mobile .theme-icon-sun {
    display: none;
}
.btn-theme-toggle .theme-icon-moon,
.btn-theme-toggle-mobile .theme-icon-moon {
    display: inline-block;
}
/* Dark mode currently: show SUN (click to go light), hide moon */
[data-theme="dark"] .btn-theme-toggle .theme-icon-moon,
[data-theme="dark"] .btn-theme-toggle-mobile .theme-icon-moon {
    display: none;
}
[data-theme="dark"] .btn-theme-toggle .theme-icon-sun,
[data-theme="dark"] .btn-theme-toggle-mobile .theme-icon-sun {
    display: inline-block;
}

/* ============================================================
   MY MUNICIBID — Dashboard (Summary.cshtml)
   Inline <style> blocks in views are rendered AFTER this file,
   so !important is required to override them in dark mode.
   ============================================================ */
[data-theme="dark"] .dashboard-header {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .dashboard-title {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .dashboard-title span {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .dashboard-section {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .dashboard-section:hover {
    box-shadow: var(--shadow-card-hover) !important;
}
[data-theme="dark"] .dashboard-section-header {
    background: linear-gradient(to bottom, #1a3550 0%, #0f2335 100%) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .dashboard-list-item {
    border-bottom-color: var(--border-light) !important;
}
[data-theme="dark"] .dashboard-list-item:hover {
    background: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .dashboard-link {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .dashboard-list-item:hover .dashboard-link {
    color: var(--color-primary-hover) !important;
}
[data-theme="dark"] .dashboard-link-icon {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .dashboard-badge.zero {
    background: linear-gradient(135deg, #2a3f54 0%, #243447 100%) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .dashboard-empty-state {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .dashboard-empty-state i {
    color: var(--text-placeholder) !important;
}
[data-theme="dark"] .dashboard-empty-state p {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .status-indicator.new {
    background: rgba(74, 159, 212, 0.18) !important;
    color: var(--color-primary-hover) !important;
}
[data-theme="dark"] .status-indicator.urgent {
    background: rgba(224, 91, 122, 0.18) !important;
    color: var(--color-danger) !important;
}
[data-theme="dark"] .dashboard-loading {
    color: var(--text-muted) !important;
}

/* ============================================================
   MY MUNICIBID — Listings pages (Active/Drafts/Pending/Ended/
   Successful/Unsuccessful). All 6 share the same pattern with
   different prefixes: al-, dl-, pl-, el-, sl-, ul-.
   ============================================================ */

/* Header */
[data-theme="dark"] .al-header,
[data-theme="dark"] .dl-header,
[data-theme="dark"] .pl-header,
[data-theme="dark"] .el-header,
[data-theme="dark"] .sl-header,
[data-theme="dark"] .ul-header {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .al-header h1,
[data-theme="dark"] .dl-header h1,
[data-theme="dark"] .pl-header h1,
[data-theme="dark"] .el-header h1,
[data-theme="dark"] .sl-header h1,
[data-theme="dark"] .ul-header h1 {
    color: var(--text-heading) !important;
}

/* Card container */
[data-theme="dark"] .al-card,
[data-theme="dark"] .dl-card,
[data-theme="dark"] .pl-card,
[data-theme="dark"] .el-card,
[data-theme="dark"] .sl-card,
[data-theme="dark"] .ul-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
}

/* Filter label */
[data-theme="dark"] .al-filter-label,
[data-theme="dark"] .dl-filter-label,
[data-theme="dark"] .pl-filter-label,
[data-theme="dark"] .el-filter-label,
[data-theme="dark"] .sl-filter-label,
[data-theme="dark"] .ul-filter-label {
    color: var(--text-secondary) !important;
}

/* Radios */
[data-theme="dark"] .al-radio,
[data-theme="dark"] .dl-radio,
[data-theme="dark"] .pl-radio,
[data-theme="dark"] .el-radio,
[data-theme="dark"] .sl-radio,
[data-theme="dark"] .ul-radio {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .al-radio:hover,
[data-theme="dark"] .dl-radio:hover,
[data-theme="dark"] .pl-radio:hover,
[data-theme="dark"] .el-radio:hover,
[data-theme="dark"] .sl-radio:hover,
[data-theme="dark"] .ul-radio:hover {
    background: var(--bg-surface-hover) !important;
}

/* Inputs */
[data-theme="dark"] .al-input,
[data-theme="dark"] .dl-input,
[data-theme="dark"] .pl-input,
[data-theme="dark"] .el-input,
[data-theme="dark"] .sl-input,
[data-theme="dark"] .ul-input {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .al-input:focus,
[data-theme="dark"] .dl-input:focus,
[data-theme="dark"] .pl-input:focus,
[data-theme="dark"] .el-input:focus,
[data-theme="dark"] .sl-input:focus,
[data-theme="dark"] .ul-input:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* Select dropdown */
[data-theme="dark"] .al-select,
[data-theme="dark"] .dl-select,
[data-theme="dark"] .pl-select,
[data-theme="dark"] .el-select,
[data-theme="dark"] .sl-select,
[data-theme="dark"] .ul-select {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .al-select-group label,
[data-theme="dark"] .dl-select-group label,
[data-theme="dark"] .pl-select-group label,
[data-theme="dark"] .el-select-group label,
[data-theme="dark"] .sl-select-group label,
[data-theme="dark"] .ul-select-group label {
    color: var(--text-secondary) !important;
}

/* Ghost buttons */
[data-theme="dark"] .al-btn-ghost,
[data-theme="dark"] .dl-btn-ghost,
[data-theme="dark"] .pl-btn-ghost,
[data-theme="dark"] .el-btn-ghost,
[data-theme="dark"] .sl-btn-ghost,
[data-theme="dark"] .ul-btn-ghost {
    color: var(--text-secondary) !important;
    border-color: var(--border-input) !important;
}
[data-theme="dark"] .al-btn-ghost:hover,
[data-theme="dark"] .dl-btn-ghost:hover,
[data-theme="dark"] .pl-btn-ghost:hover,
[data-theme="dark"] .el-btn-ghost:hover,
[data-theme="dark"] .sl-btn-ghost:hover,
[data-theme="dark"] .ul-btn-ghost:hover {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
}

/* Listing items */
[data-theme="dark"] .al-item,
[data-theme="dark"] .dl-item,
[data-theme="dark"] .pl-item,
[data-theme="dark"] .el-item,
[data-theme="dark"] .sl-item,
[data-theme="dark"] .ul-item {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
}
[data-theme="dark"] .al-item:hover,
[data-theme="dark"] .dl-item:hover,
[data-theme="dark"] .pl-item:hover,
[data-theme="dark"] .el-item:hover,
[data-theme="dark"] .sl-item:hover,
[data-theme="dark"] .ul-item:hover {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Card footer within listing item */
[data-theme="dark"] .al-item .card-footer,
[data-theme="dark"] .dl-item .card-footer,
[data-theme="dark"] .pl-item .card-footer,
[data-theme="dark"] .el-item .card-footer,
[data-theme="dark"] .sl-item .card-footer,
[data-theme="dark"] .ul-item .card-footer {
    background: var(--bg-surface-alt) !important;
    border-top-color: var(--border-light) !important;
}

/* Headings and paragraphs inside items */
[data-theme="dark"] .al-item h1,
[data-theme="dark"] .dl-item h1,
[data-theme="dark"] .pl-item h1,
[data-theme="dark"] .el-item h1,
[data-theme="dark"] .sl-item h1,
[data-theme="dark"] .ul-item h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .al-item h1 a,
[data-theme="dark"] .dl-item h1 a,
[data-theme="dark"] .pl-item h1 a,
[data-theme="dark"] .el-item h1 a,
[data-theme="dark"] .sl-item h1 a,
[data-theme="dark"] .ul-item h1 a,
[data-theme="dark"] .al-item .card-title,
[data-theme="dark"] .dl-item .card-title,
[data-theme="dark"] .pl-item .card-title,
[data-theme="dark"] .el-item .card-title,
[data-theme="dark"] .sl-item .card-title,
[data-theme="dark"] .ul-item .card-title,
[data-theme="dark"] .al-item .card-title a,
[data-theme="dark"] .dl-item .card-title a,
[data-theme="dark"] .pl-item .card-title a,
[data-theme="dark"] .el-item .card-title a,
[data-theme="dark"] .sl-item .card-title a,
[data-theme="dark"] .ul-item .card-title a {
    color: var(--text-link) !important;
}
[data-theme="dark"] .al-item p,
[data-theme="dark"] .dl-item p,
[data-theme="dark"] .pl-item p,
[data-theme="dark"] .el-item p,
[data-theme="dark"] .sl-item p,
[data-theme="dark"] .ul-item p {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .al-item p b,
[data-theme="dark"] .dl-item p b,
[data-theme="dark"] .pl-item p b,
[data-theme="dark"] .el-item p b,
[data-theme="dark"] .sl-item p b,
[data-theme="dark"] .ul-item p b {
    color: var(--text-strong) !important;
}

/* RestrictedRed chip */
[data-theme="dark"] .al-item .RestrictedRed,
[data-theme="dark"] .dl-item .RestrictedRed,
[data-theme="dark"] .pl-item .RestrictedRed,
[data-theme="dark"] .el-item .RestrictedRed,
[data-theme="dark"] .sl-item .RestrictedRed,
[data-theme="dark"] .ul-item .RestrictedRed {
    background: rgba(224, 91, 122, 0.15) !important;
    color: var(--color-danger) !important;
}

/* Empty state */
[data-theme="dark"] .al-empty,
[data-theme="dark"] .dl-empty,
[data-theme="dark"] .pl-empty,
[data-theme="dark"] .el-empty,
[data-theme="dark"] .sl-empty,
[data-theme="dark"] .ul-empty {
    color: var(--text-muted) !important;
}

/* Successful listings bottom bar (sl-bottom-bar / ul-bottom-bar) */
[data-theme="dark"] .sl-bottom-bar,
[data-theme="dark"] .ul-bottom-bar {
    background: var(--bg-surface-alt) !important;
    border-top-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   MY MUNICIBID — Historical Fees & Purchased Invoices
   (HistoricalFees.cshtml + InvoicePurchases.cshtml)
   ============================================================ */

/* Shared page header (HistoricalFees) */
[data-theme="dark"] .buyer-fees-container .page-header,
[data-theme="dark"] .buyer-fees-container .page-header {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .buyer-fees-container .page-title,
[data-theme="dark"] .page-title {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .buyer-fees-container .page-subtitle,
[data-theme="dark"] .page-subtitle {
    color: var(--text-muted) !important;
}

/* Invoices card container */
[data-theme="dark"] .invoices-card {
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .invoices-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}

/* Modern table (HistoricalFees) */
[data-theme="dark"] .modern-table thead {
    background: linear-gradient(to bottom, var(--bg-surface-alt) 0%, var(--bg-muted) 100%) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .modern-table th {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .modern-table th a {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .modern-table th a:hover {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .modern-table tbody tr {
    border-bottom-color: var(--border-light) !important;
}
[data-theme="dark"] .modern-table tbody tr:hover {
    background-color: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .modern-table td {
    color: var(--text-primary) !important;
}

/* Invoice link chip */
[data-theme="dark"] .invoice-link,
[data-theme="dark"] .cell-invoice-link {
    background: rgba(74, 159, 212, 0.12) !important;
    color: var(--text-link) !important;
}
[data-theme="dark"] .invoice-link:hover,
[data-theme="dark"] .cell-invoice-link:hover {
    background: rgba(74, 159, 212, 0.22) !important;
    color: var(--text-link-hover) !important;
}

/* Status badges (shared) */
[data-theme="dark"] .status-badge {
    border-color: transparent !important;
}
[data-theme="dark"] .status-badge.new {
    background: rgba(74, 159, 212, 0.18) !important;
    color: var(--color-primary-hover) !important;
    border-color: rgba(74, 159, 212, 0.35) !important;
}
[data-theme="dark"] .status-badge.pending {
    background: rgba(255, 196, 46, 0.15) !important;
    color: var(--color-warning) !important;
    border-color: rgba(255, 196, 46, 0.35) !important;
}
[data-theme="dark"] .status-badge.paid {
    background: rgba(45, 209, 131, 0.15) !important;
    color: var(--color-success) !important;
    border-color: rgba(45, 209, 131, 0.35) !important;
}
[data-theme="dark"] .status-badge.shipped {
    background: rgba(99, 91, 255, 0.15) !important;
    color: #8b83ff !important;
    border-color: rgba(99, 91, 255, 0.35) !important;
}
/* Default status-badge (used without modifier in HistoricalFees) */
[data-theme="dark"] .modern-table .status-badge {
    background: rgba(45, 209, 131, 0.15) !important;
    color: var(--color-success) !important;
    border-color: rgba(45, 209, 131, 0.35) !important;
}

/* Date / helper text */
[data-theme="dark"] .date-text {
    color: var(--text-muted) !important;
}

/* Generic empty state */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty-state-text,
[data-theme="dark"] .invoices-empty-state,
[data-theme="dark"] .invoices-empty-text {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .empty-state-title,
[data-theme="dark"] .invoices-empty-title {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .invoices-empty-state i,
[data-theme="dark"] .empty-state-icon {
    color: var(--text-placeholder) !important;
}

/* Purchased Invoices specific */
[data-theme="dark"] .invoices-header {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .invoices-title {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .invoices-title span {
    color: var(--text-link) !important;
}
[data-theme="dark"] .invoices-table-container {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .invoices-table-header {
    background: linear-gradient(to bottom, var(--bg-surface-alt) 0%, var(--bg-muted) 100%) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .invoices-table-header-cell,
[data-theme="dark"] .invoices-table-header-cell a {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .invoices-table-header-cell a:hover {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .invoices-table-row {
    border-bottom-color: var(--border-light) !important;
}
[data-theme="dark"] .invoices-table-row:hover {
    background: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .invoices-table-cell,
[data-theme="dark"] .cell-seller,
[data-theme="dark"] .cell-total {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .cell-date {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .btn-view-invoice {
    background: var(--bg-surface) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-view-invoice:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-link) !important;
}

/* ============================================================
   MY MUNICIBID — Paid Fee Invoice (PaidFeeInvoice.cshtml)
   ============================================================ */
[data-theme="dark"] .fee-invoice-header {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .fee-invoice-title {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .fee-invoice-title span {
    color: var(--text-link) !important;
}
[data-theme="dark"] .btn-print-modern {
    background: var(--bg-surface) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-print-modern:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--text-muted) !important;
}
[data-theme="dark"] .fee-info-panel {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .fee-info-section h3 {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .fee-info-section p {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .fee-info-section strong {
    color: var(--text-strong) !important;
}
[data-theme="dark"] .fee-table-container {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] .fee-table thead {
    background: linear-gradient(to bottom, var(--bg-surface-alt) 0%, var(--bg-muted) 100%) !important;
}
[data-theme="dark"] .fee-table th {
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .fee-table tbody tr {
    border-bottom-color: var(--border-light) !important;
}
[data-theme="dark"] .fee-table tbody tr:hover {
    background-color: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .fee-table td {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .pagination-wrapper {
    border-top-color: var(--border-color) !important;
}

/* ============================================================
   MY MUNICIBID — Credit Cards (CreditCards.cshtml + credit-cards.css)
   Keep Stripe-inspired purple accents, darken surfaces.
   ============================================================ */
[data-theme="dark"] .primary-card-banner {
    background: linear-gradient(135deg, #1a1f3a 0%, #1e2547 100%) !important;
    border-color: rgba(99, 91, 255, 0.35) !important;
}
[data-theme="dark"] .primary-card-icon {
    background: var(--bg-surface-alt) !important;
    box-shadow: 0 2px 8px rgba(99, 91, 255, 0.25) !important;
}
[data-theme="dark"] .primary-card-label {
    color: #8b83ff !important;
}
[data-theme="dark"] .primary-card-number {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .primary-card-meta {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .primary-card-meta i {
    color: var(--text-muted) !important;
}

/* credit-cards.css overrides */
[data-theme="dark"] .cards-section {
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .cards-header-modern {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .header-text h2 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .header-text p {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .cards-table th {
    background: var(--bg-surface-alt) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .cards-table td {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-light) !important;
}
[data-theme="dark"] .cards-table tr:hover {
    background: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .cards-table tr.primary-row {
    background: linear-gradient(90deg, rgba(99, 91, 255, 0.08) 0%, rgba(99, 91, 255, 0.03) 100%) !important;
}
[data-theme="dark"] .cards-table tr.primary-row:hover {
    background: linear-gradient(90deg, rgba(99, 91, 255, 0.15) 0%, rgba(99, 91, 255, 0.08) 100%) !important;
}
[data-theme="dark"] .card-brand-icon {
    background: var(--bg-muted) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .billing-info {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .billing-name {
    color: var(--text-strong) !important;
}
[data-theme="dark"] .billing-address,
[data-theme="dark"] .no-billing-info {
    color: var(--text-muted) !important;
}

/* Mobile table card mode for .cards-table tbody tr */
@media screen and (max-width: 991px) {
    [data-theme="dark"] .cards-table tbody tr {
        background: var(--bg-surface) !important;
        border-color: var(--border-card) !important;
        box-shadow: var(--shadow-sm) !important;
    }
    [data-theme="dark"] .cards-table tbody td {
        border-bottom-color: var(--border-light) !important;
    }
    [data-theme="dark"] .cards-table tbody td::before {
        color: var(--text-secondary) !important;
    }
}

/* Delete card modal */
[data-theme="dark"] #DeleteCardModal .modal-content {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] .delete-modal-icon {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(185, 28, 28, 0.15)) !important;
}
[data-theme="dark"] .delete-modal-icon i {
    color: var(--color-danger) !important;
}
[data-theme="dark"] .delete-modal-title {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .delete-modal-message {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .delete-modal-card-info {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .delete-modal-card-info .card-icon {
    color: #8b83ff !important;
}
[data-theme="dark"] .delete-modal-card-info .card-details-text .card-label {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .delete-modal-card-info .card-details-text .card-value {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .delete-modal-warning {
    color: var(--color-warning) !important;
}
[data-theme="dark"] .btn-delete-cancel {
    background: var(--bg-surface) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-delete-cancel:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--text-muted) !important;
}

/* ============================================================
   MY MUNICIBID — Set Billing Address (SetBillingAddress.cshtml)
   Gradient hero retained; card surface darkened.
   ============================================================ */
[data-theme="dark"] .billing-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .billing-card-header {
    background: var(--bg-surface-alt) !important;
    border-bottom-color: var(--border-light) !important;
}
[data-theme="dark"] .billing-card-header i {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .billing-card-header h3 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .billing-card-body select,
[data-theme="dark"] .billing-card-body .form-control {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .billing-card-body select:focus,
[data-theme="dark"] .billing-card-body .form-control:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
[data-theme="dark"] .btn-new-address {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
[data-theme="dark"] .btn-new-address:hover {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
}
[data-theme="dark"] .btn-back-link {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .btn-back-link:hover {
    color: var(--text-link-hover) !important;
}

/* ============================================================
   MY MUNICIBID — Unpaid Fee Invoice (UnpaidFeeInvoice.cshtml)
   Gradient hero retained. Card surfaces darkened.
   ============================================================ */
[data-theme="dark"] .fee-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .fee-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}
[data-theme="dark"] .fee-card-header {
    background: var(--bg-surface-alt) !important;
    border-bottom-color: var(--border-light) !important;
}
[data-theme="dark"] .fee-card-header i {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .fee-card-header h3 {
    color: var(--text-heading) !important;
}

/* Saved cards list */
[data-theme="dark"] .saved-card-option {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-input) !important;
}
[data-theme="dark"] .saved-card-option:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .saved-card-option.selected {
    background: rgba(74, 159, 212, 0.12) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
[data-theme="dark"] .saved-card-radio {
    border-color: var(--border-input) !important;
}
[data-theme="dark"] .saved-card-option.selected .saved-card-radio {
    background: var(--bg-surface) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .saved-card-option.selected .saved-card-radio::after {
    background: var(--color-primary) !important;
}
[data-theme="dark"] .saved-card-brand-icon {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .saved-card-number {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .saved-card-expiry {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .saved-card-primary-tag {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
}

/* Empty state for cards */
[data-theme="dark"] .no-cards-message,
[data-theme="dark"] .cards-loading {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .no-cards-message i {
    color: var(--text-placeholder) !important;
}
[data-theme="dark"] .no-cards-message p,
[data-theme="dark"] .cards-loading p {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .cards-loading i {
    color: var(--color-primary) !important;
}

/* Manage cards button */
[data-theme="dark"] .btn-manage-cards {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
[data-theme="dark"] .btn-manage-cards:hover {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
}

/* Payment error */
[data-theme="dark"] .payment-error {
    background: rgba(224, 91, 122, 0.12) !important;
    border-color: rgba(224, 91, 122, 0.35) !important;
    color: var(--color-danger) !important;
}
[data-theme="dark"] .payment-security {
    color: var(--text-muted) !important;
}

/* Invoice info card contents */
[data-theme="dark"] .invoice-info-label {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .invoice-info-value {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .billing-address-section {
    border-top-color: var(--border-light) !important;
}
[data-theme="dark"] .billing-address-header span {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .btn-change-address {
    border-color: var(--border-input) !important;
    color: var(--color-primary) !important;
}
[data-theme="dark"] .btn-change-address:hover {
    background: rgba(74, 159, 212, 0.12) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
[data-theme="dark"] .billing-address-text {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-print-invoice {
    background: var(--bg-surface) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-print-invoice:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Line items container */
[data-theme="dark"] .fee-line-items {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Shared alerts */
[data-theme="dark"] .alert-danger {
    background: rgba(224, 91, 122, 0.12) !important;
    border-color: rgba(224, 91, 122, 0.35) !important;
    color: var(--color-danger) !important;
}
[data-theme="dark"] .alert-warning {
    background: rgba(255, 196, 46, 0.10) !important;
    border-color: rgba(255, 196, 46, 0.35) !important;
    color: var(--color-warning) !important;
}
[data-theme="dark"] .alert-success {
    background: rgba(45, 209, 131, 0.12) !important;
    border-color: rgba(45, 209, 131, 0.35) !important;
    color: var(--color-success) !important;
}
[data-theme="dark"] .alert-info {
    background: rgba(32, 204, 232, 0.12) !important;
    border-color: rgba(32, 204, 232, 0.35) !important;
    color: var(--color-info) !important;
}

/* ============================================================
   MY MUNICIBID — Unpaid Listing Invoice (UnpaidListingInvoice.cshtml)
   ============================================================ */
[data-theme="dark"] .invoice-header {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .invoice-title-section h1 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .invoice-title-section h1 span {
    color: var(--text-link) !important;
}

/* Modern outline button */
[data-theme="dark"] .btn-outline-modern {
    background: var(--bg-surface) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-outline-modern:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--text-muted) !important;
    color: var(--text-primary) !important;
}

/* Payment instructions (yellow) */
[data-theme="dark"] .payment-instructions-card {
    background: rgba(255, 196, 46, 0.08) !important;
    border-color: rgba(255, 196, 46, 0.35) !important;
}
[data-theme="dark"] .payment-instructions-card h2 {
    color: var(--color-warning) !important;
}

/* Invoice info section */
[data-theme="dark"] .invoice-info-section {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .invoice-info-section h3 {
    color: var(--text-muted) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .invoice-info-section p {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .invoice-info-section strong {
    color: var(--text-strong) !important;
}

/* Comments section */
[data-theme="dark"] .comments-section {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-card) !important;
}
[data-theme="dark"] .comments-section h2 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .comments-section textarea {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .comments-section textarea:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
[data-theme="dark"] .buyercomments {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-left-color: var(--color-primary) !important;
}

/* Invoice table */
[data-theme="dark"] .invoice-table-container {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .invoice-table thead {
    background: linear-gradient(to bottom, var(--bg-surface-alt) 0%, var(--bg-muted) 100%) !important;
}
[data-theme="dark"] .invoice-table th {
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .invoice-table tbody tr {
    border-bottom-color: var(--border-light) !important;
}
[data-theme="dark"] .invoice-table tbody tr:hover {
    background-color: var(--bg-surface-hover) !important;
}
[data-theme="dark"] .invoice-table td {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .invoice-table .item-link {
    color: var(--text-link) !important;
}
[data-theme="dark"] .invoice-table .item-link:hover {
    color: var(--text-link-hover) !important;
}
[data-theme="dark"] .invoice-table .item-id,
[data-theme="dark"] .invoice-table .item-meta {
    color: var(--text-muted) !important;
}

/* Tax badges */
[data-theme="dark"] .tax-badge.taxed {
    background: rgba(45, 209, 131, 0.15) !important;
    color: var(--color-success) !important;
    border-color: rgba(45, 209, 131, 0.35) !important;
}
[data-theme="dark"] .tax-badge.not-taxed {
    background: var(--bg-muted) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

/* Totals rows */
[data-theme="dark"] .totals-row {
    background: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .grand-total-row {
    background: linear-gradient(to bottom, rgba(74, 159, 212, 0.12) 0%, rgba(74, 159, 212, 0.18) 100%) !important;
    border-top-color: var(--color-primary) !important;
}
[data-theme="dark"] .grand-total-row h1 {
    color: var(--color-primary-hover) !important;
}

/* Add adjustment card */
[data-theme="dark"] .add-adjustment-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .add-adjustment-header {
    background: linear-gradient(to bottom, var(--bg-surface-alt) 0%, var(--bg-muted) 100%) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .add-adjustment-header i {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .add-adjustment-header h3 {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .add-adjustment-header small {
    color: var(--text-muted) !important;
}

/* Form group modern */
[data-theme="dark"] .form-group-modern label {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .form-group-modern input[type="text"],
[data-theme="dark"] .form-group-modern select {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .form-group-modern input[type="text"]:focus,
[data-theme="dark"] .form-group-modern select:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
[data-theme="dark"] .tooltips {
    color: var(--text-muted) !important;
}

/* Added payment success */
[data-theme="dark"] .addpayment-success {
    background: rgba(45, 209, 131, 0.15) !important;
    border-color: rgba(45, 209, 131, 0.35) !important;
    color: var(--color-success) !important;
}

/* Pay now button (kept dark brand gradient — works in both themes) */

/* Outline danger */
[data-theme="dark"] .btn-outline-danger {
    background: var(--bg-surface) !important;
}

/* ============================================================
   MY MUNICIBID — My Agency (MyAgency.cshtml)
   Page defines its own :root vars; override with higher
   specificity (html[data-theme="dark"] beats :root).
   ============================================================ */
html[data-theme="dark"] {
    /* Agency page palette — remap for dark */
    --gray-50: #1a2940;
    --gray-100: #243447;
    --gray-200: #2a3f54;
    --gray-300: #3a4f64;
    --gray-600: #8fa3b8;
    --gray-700: #d4dce6;
    --gray-900: #e8edf2;
}
[data-theme="dark"] .team-description {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .team-member-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .team-member-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .team-member-email {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .btn-resend {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] .btn-remove {
    background-color: var(--bg-surface) !important;
}
[data-theme="dark"] .notification-toggle-wrapper {
    background-color: var(--bg-surface-alt) !important;
}
[data-theme="dark"] .notification-toggle-wrapper label {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .watching-none {
    background-color: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .modal-content {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] .modal-header {
    background: linear-gradient(135deg, var(--bg-surface-alt) 0%, var(--bg-surface) 100%) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-title {
    color: var(--text-heading) !important;
}
[data-theme="dark"] .modal-footer {
    background-color: var(--bg-surface-alt) !important;
    border-top-color: var(--border-color) !important;
}

/* ============================================================
   SITE-WIDE — Common Bootstrap / shared components fallbacks
   Catches inline cards/modals/alerts/tables in any view that
   didn't get explicit page-level overrides above.
   ============================================================ */

/* Bootstrap card fallbacks */
[data-theme="dark"] .card {
    background: var(--bg-surface);
    border-color: var(--border-card);
    color: var(--text-primary);
}
[data-theme="dark"] .card-header {
    background: var(--bg-surface-alt);
    border-bottom-color: var(--border-color);
    color: var(--text-heading);
}
[data-theme="dark"] .card-body {
    color: var(--text-primary);
}
[data-theme="dark"] .card-footer {
    background: var(--bg-surface-alt);
    border-top-color: var(--border-color);
    color: var(--text-primary);
}

/* Modal fallbacks (Bootstrap 4/5) */
[data-theme="dark"] .modal-body {
    color: var(--text-primary);
}
[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .close {
    color: var(--text-primary);
    opacity: 0.7;
}
[data-theme="dark"] .close:hover {
    color: var(--text-heading);
    opacity: 1;
}

/* Form controls (Bootstrap fallbacks) */
[data-theme="dark"] .form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] input.form-control {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}
[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-input);
    border-color: var(--border-focus);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-placeholder);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--bg-muted);
    color: var(--text-muted);
}
[data-theme="dark"] .form-text,
[data-theme="dark"] .form-text.text-muted {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-input);
    color: var(--text-primary);
}
[data-theme="dark"] .custom-control-label,
[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

/* Tables (Bootstrap fallbacks) */
[data-theme="dark"] .table {
    color: var(--text-primary);
    background: transparent;
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table th {
    background-color: var(--bg-surface-alt);
    color: var(--text-heading);
    border-color: var(--border-color);
}
[data-theme="dark"] .table td {
    border-color: var(--border-light);
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe);
}
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--table-hover);
}
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
    border-color: var(--border-color);
}

/* Panels (older Bootstrap 3) */
[data-theme="dark"] .panel {
    background-color: var(--bg-surface);
    border-color: var(--border-card);
}
[data-theme="dark"] .panel-default > .panel-heading {
    background-color: var(--bg-surface-alt);
    color: var(--text-heading);
    border-color: var(--border-color);
}
[data-theme="dark"] .panel-body {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}
[data-theme="dark"] .panel-footer {
    background-color: var(--bg-surface-alt);
    border-top-color: var(--border-color);
    color: var(--text-primary);
}

/* Alerts (generic) */
[data-theme="dark"] .alert {
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-surface-alt);
    color: var(--text-primary);
}
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-muted);
}

/* List group */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .list-group-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-primary);
}
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-surface-hover);
    color: var(--text-heading);
}
[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-color);
}
[data-theme="dark"] .dropdown-header {
    color: var(--text-muted);
}

/* Pagination (Bootstrap) */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-link);
}
[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-link-hover);
}
[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-primary);
}
[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--bg-surface-alt);
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* Tabs / Nav pills */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-primary);
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-light);
    color: var(--text-heading);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-surface);
    border-color: var(--border-color) var(--border-color) var(--bg-surface);
    color: var(--text-heading);
}
[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-primary);
}
[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
}

/* Badges */
[data-theme="dark"] .badge-secondary,
[data-theme="dark"] .badge.badge-secondary {
    background-color: var(--bg-muted);
    color: var(--text-primary);
}
[data-theme="dark"] .badge-light,
[data-theme="dark"] .badge.badge-light {
    background-color: var(--bg-surface-alt);
    color: var(--text-primary);
}

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

/* Horizontal code / pre / kbd */
[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-theme="dark"] kbd {
    background-color: var(--bg-code);
    color: var(--text-primary);
}

/* Popovers and tooltips (Bootstrap) */
[data-theme="dark"] .popover {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}
[data-theme="dark"] .popover-body {
    color: var(--text-primary);
}
[data-theme="dark"] .popover-header {
    background-color: var(--bg-surface-alt);
    border-bottom-color: var(--border-color);
    color: var(--text-heading);
}
[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-tooltip);
    color: var(--text-inverse);
}

/* ============================================================
   HOME PAGES — Inline dropdown backgrounds + mobile cat/loc btns
   IndexBidder.cshtml + IndexSeller.cshtml
   ============================================================ */
[data-theme="dark"] #partial-location-b,
[data-theme="dark"] #partial-category-b,
[data-theme="dark"] .loc-panel,
[data-theme="dark"] .cat-panel {
    background-color: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .custom-cat-btn,
[data-theme="dark"] .custom-loc-btn {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-input) !important;
}
[data-theme="dark"] .dropdown-toggle.dropdown-cat {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .custom-cat-btn:hover,
[data-theme="dark"] .custom-loc-btn:hover {
    background: var(--bg-surface-hover) !important;
}

/* Bootstrap btn-light inside hero (used for dropdown buttons) */
[data-theme="dark"] .custom-cat-btn.btn-light,
[data-theme="dark"] .custom-loc-btn.btn-light {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   PAGES WITH HARDCODED INLINE STYLE BACKGROUNDS
   Use attribute selectors on style= to override.
   ============================================================ */

/* ForgotPasswordEmail beige info box (#fdeabe) and gray box (#f3f3f3) */
[data-theme="dark"] [style*="#fdeabe"] {
    background: rgba(255, 196, 46, 0.12) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="#f3f3f3"] {
    background: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
}

/* Idverificationstart verification panel (#f9f4e1) */
[data-theme="dark"] [style*="#f9f4e1"] {
    background: rgba(255, 196, 46, 0.10) !important;
    color: var(--text-primary) !important;
}

/* SellerWelcome verification-stepbox (#f8f9fa) */
[data-theme="dark"] .verification-stepbox,
[data-theme="dark"] [style*="#f8f9fa"] {
    background-color: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
}

/* ListingDetail reserve-not-met chip (#fff3cd yellow) */
[data-theme="dark"] [style*="#fff3cd"] {
    background: rgba(255, 196, 46, 0.18) !important;
    border-color: rgba(255, 196, 46, 0.40) !important;
    color: var(--color-warning) !important;
}

/* AuctionDetails + Listing_ActiveAuctionRow modal (#f8f7f7) */
[data-theme="dark"] [style*="#f8f7f7"] {
    background-color: transparent !important;
}

/* Inline warning text colors (#856404 dark yellow) */
[data-theme="dark"] [style*="#856404"] {
    color: var(--color-warning) !important;
}

/* Inline #E67B7B validation errors — keep soft red on dark */
[data-theme="dark"] [style*="#E67B7B"],
[data-theme="dark"] [style*="#e67b7b"] {
    color: var(--color-danger-soft) !important;
}

/* Shared UnpaidListingInvoice_ForPrinting beige row */
[data-theme="dark"] [style*="#ffffd7"] {
    background: rgba(255, 196, 46, 0.10) !important;
    color: var(--text-primary) !important;
}

/* ListingDetail ending-now red text */
[data-theme="dark"] [style*="#dc2626"] {
    color: var(--color-danger) !important;
}

/* ============================================================
   ENSURE TEXT CONTRAST — generic overrides for anywhere a view
   sets color to dark Tailwind grays that become unreadable on
   dark bg. These are inline-style catch-alls.
   ============================================================ */
[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #1a202c"],
[data-theme="dark"] [style*="color:#1a202c"],
[data-theme="dark"] [style*="color: #1a2332"],
[data-theme="dark"] [style*="color:#1a2332"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color:#1f2937"] {
    color: var(--text-heading) !important;
}
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #4a5568"],
[data-theme="dark"] [style*="color:#4a5568"] {
    color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748b"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color: #9ca3af"],
[data-theme="dark"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="color: #94a3b8"],
[data-theme="dark"] [style*="color:#94a3b8"] {
    color: var(--text-muted) !important;
}
[data-theme="dark"] [style*="color: #555"],
[data-theme="dark"] [style*="color:#555"] {
    color: var(--text-primary) !important;
}

/* ============================================================
   DROPDOWN LIGHT MENUS (Bootstrap dropdown-menu defaults)
   ============================================================ */
[data-theme="dark"] .dropdown-menu.dropdown-menu-light,
[data-theme="dark"] .dropList.dropdown-menu {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

/* ============================================================
   TYPOGRAPHY — force readable defaults where inline/missing
   ============================================================ */
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .container {
    color: var(--text-primary);
}

/* ============================================================
   HEADER — user initials circle (LogOnUserControl)
   Keep white pill with DARK initials in dark mode (same as light).
   ============================================================ */
[data-theme="dark"] .initials-circle,
[data-theme="dark"] .navbar-nav .nav-link .initials-circle,
[data-theme="dark"] .navbar .initials-circle {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}

/* ============================================================
   LISTING DETAIL — "Ask this seller a question" modal polish
   Textarea was navy-on-navy (invisible), backdrop wasn't dimming
   the page enough. Tighten contrast.
   ============================================================ */

/* Modal container — visible border so it reads as a floating panel */
[data-theme="dark"] #AddQuestion .modal-content,
[data-theme="dark"] #ConfirmDeletion .modal-content {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-xl) !important;
    color: var(--text-primary) !important;
}

/* Header: subtle surface-alt gradient so header reads as distinct */
[data-theme="dark"] #AddQuestion .modal-header {
    background: var(--bg-surface-alt) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
[data-theme="dark"] #AddQuestion .modal-title {
    color: var(--text-heading) !important;
}
[data-theme="dark"] #AddQuestion .modal-header .close {
    color: var(--text-primary) !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
}
[data-theme="dark"] #AddQuestion .modal-header .close:hover {
    color: var(--text-heading) !important;
    opacity: 1 !important;
}

/* Body text */
[data-theme="dark"] #AddQuestion .modal-body p,
[data-theme="dark"] #AddQuestion .modal-body i,
[data-theme="dark"] #AddQuestion .modal-body small,
[data-theme="dark"] #AddQuestion .question-modal-body p,
[data-theme="dark"] #AddQuestion .question-modal-body i,
[data-theme="dark"] #AddQuestion .question-modal-body small {
    color: var(--text-primary) !important;
}
[data-theme="dark"] #AddQuestion .modal-body b,
[data-theme="dark"] #AddQuestion .question-modal-body b {
    color: var(--text-heading) !important;
}

/* Textarea: distinct lighter surface, clear border, focus ring */
[data-theme="dark"] #AddQuestion textarea,
[data-theme="dark"] #AddQuestion #TxtAreaMsg,
[data-theme="dark"] #AddQuestion textarea#TxtAreaMsg {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-input) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.75rem !important;
}
[data-theme="dark"] #AddQuestion textarea:focus,
[data-theme="dark"] #AddQuestion #TxtAreaMsg:focus {
    background: var(--bg-surface-hover) !important;
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
    outline: none !important;
}
[data-theme="dark"] #AddQuestion textarea::placeholder {
    color: var(--text-placeholder) !important;
}

/* Footer + confirm delete modal footer */
[data-theme="dark"] #AddQuestion .modal-footer,
[data-theme="dark"] #ConfirmDeletion .modal-footer {
    background: var(--bg-surface-alt) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Backdrop: make sure it dims the page */
[data-theme="dark"] .modal-backdrop,
[data-theme="dark"] .modal-backdrop.show,
[data-theme="dark"] .modal-backdrop.fade.show {
    background: #000000 !important;
    background-image: none !important;
    opacity: 0.7 !important;
}

/* ============================================================
   LISTING DETAIL — vivid greens + white outline buttons (dark mode)
   ============================================================ */

/* "No Reserve" / reserve status — punchy emerald for legibility on navy.
   Both variants: auction-box chip (awe-rt-ReserveStatusText) and the
   Auction Details row (awe-rt-ReserveStatus). */
[data-theme="dark"] .awe-rt-ReserveStatusText,
[data-theme="dark"] .awe-rt-ReserveStatus,
[data-theme="dark"] span.awe-rt-ReserveStatus,
[data-theme="dark"] span.awe-rt-ReserveStatusText {
    color: #4ade80 !important;      /* emerald-400: high contrast on dark navy */
    font-weight: 700 !important;
}

/* "No Reserve" question-mark help icon next to the label */
[data-theme="dark"] .awe-rt-ReserveStatusText + i,
[data-theme="dark"] .awe-rt-ReserveStatus + i,
[data-theme="dark"] .awe-rt-ReserveStatusText i,
[data-theme="dark"] .awe-rt-ReserveStatus i {
    color: #4ade80 !important;
    opacity: 0.85;
}

/* ADD TO WATCHLIST — btn-outline-primary pill: transparent + white
   border/text/icon. Active/watched: solid white bg with dark text. */
[data-theme="dark"] a.watchlist-btn.btn-outline-primary,
[data-theme="dark"] a.btn-outline-primary.watchlist-btn,
[data-theme="dark"] .btn-outline-primary.btn-pill {
    background-color: transparent !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}
[data-theme="dark"] a.watchlist-btn.btn-outline-primary i,
[data-theme="dark"] a.btn-outline-primary.watchlist-btn i,
[data-theme="dark"] .btn-outline-primary.btn-pill i {
    color: #ffffff !important;
}
[data-theme="dark"] a.watchlist-btn.btn-outline-primary:hover,
[data-theme="dark"] a.btn-outline-primary.watchlist-btn:hover,
[data-theme="dark"] .btn-outline-primary.btn-pill:hover {
    background-color: #ffffff !important;
    color: #0f1923 !important;
    border-color: #ffffff !important;
}
[data-theme="dark"] a.watchlist-btn.btn-outline-primary:hover i,
[data-theme="dark"] a.btn-outline-primary.watchlist-btn:hover i,
[data-theme="dark"] .btn-outline-primary.btn-pill:hover i {
    color: #0f1923 !important;
}
/* Active/watched state: already filled, keep white ink on dark */
[data-theme="dark"] a.watchlist-btn.btn-primary,
[data-theme="dark"] a.watchlist-btn.active {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f1923 !important;
}
[data-theme="dark"] a.watchlist-btn.btn-primary i,
[data-theme="dark"] a.watchlist-btn.active i {
    color: #0f1923 !important;
}

/* History button (Auction Details → Bid History row) — white pill */
[data-theme="dark"] .btn-outline-secondary.btn-pill,
[data-theme="dark"] a.btn-outline-secondary.btn-pill,
[data-theme="dark"] a.btn.btn-xs.btn-outline-secondary.btn-pill {
    background-color: transparent !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}
[data-theme="dark"] .btn-outline-secondary.btn-pill:hover,
[data-theme="dark"] a.btn-outline-secondary.btn-pill:hover {
    background-color: #ffffff !important;
    color: #0f1923 !important;
    border-color: #ffffff !important;
}

/* ---- Seller Storefront header: Terms of Sale / Edit / breadcrumb ---- */
[data-theme="dark"] .browseForSeller .btn-pill.btn-secondary,
[data-theme="dark"] .browseForSeller a.btn-pill.btn-secondary,
[data-theme="dark"] .browseForSeller .editButton {
    color: #ffffff !important;
}
[data-theme="dark"] .browseForSeller .btn-pill.btn-secondary i,
[data-theme="dark"] .browseForSeller .editButton i {
    color: #ffffff !important;
}
[data-theme="dark"] .breadcrumbCustom a,
[data-theme="dark"] .breadcrumbCustom li a {
    color: #ffffff !important;
}
[data-theme="dark"] .breadcrumbCustom a i {
    color: #ffffff !important;
}
/* Breadcrumb strip: let it match the page body instead of #FAFAFA. */
[data-theme="dark"] .breadcrumbCustom,
[data-theme="dark"] .breadcrumbContainer {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ---- Auction box "Credit Card Needed To Bid" status card ----
   The partial ships with a white card + dark text baked into an inline
   <style> block; override it so the card blends flat into the dark body
   (no accent bar, no box-shadow, just a hairline border). */
[data-theme="dark"] .status-card {
    background: transparent !important;
    border-color: var(--border-color) !important;
    border-left-color: var(--border-color) !important;
    border-left-width: 1px !important;
    box-shadow: none !important;
}
[data-theme="dark"] .status-card__icon,
[data-theme="dark"] .status-card__title {
    color: #e8edf2 !important;
}
[data-theme="dark"] .status-card__text {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .status-card__text b {
    color: #ffffff !important;
}
[data-theme="dark"] .btn-add-credit {
    background-color: var(--color-accent) !important;
    color: #0f1923 !important;
}
[data-theme="dark"] .btn-add-credit:hover {
    background-color: #ffffff !important;
    color: #0f1923 !important;
}

/* ============================================================
   LISTING DETAIL — Nuclear flatten (final override)
   Any previous rule that tried to paint these elements with
   var(--bg-surface) or similar gets cancelled here. Keeps
   the page body as one continuous dark background.
   ============================================================ */
html[data-theme="dark"] #breadcrumb-item,
html[data-theme="dark"] #breadcrumb-item > ul,
html[data-theme="dark"] .breadcrumbCustom,
html[data-theme="dark"] .breadcrumbContainer,
html[data-theme="dark"] .itempage-section,
html[data-theme="dark"] .divider-item,
html[data-theme="dark"] .heading-itempage,
html[data-theme="dark"] .section-item,
html[data-theme="dark"] .auctionbox,
html[data-theme="dark"] .auctionbuybox,
html[data-theme="dark"] .panel-body-item,
html[data-theme="dark"] .panel-item,
html[data-theme="dark"] .main-image-container,
html[data-theme="dark"] .containerAuntion,
html[data-theme="dark"] .awe-rt-BuyBox {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ============================================================
   AJAX Image Uploader — thumbnail Rotate / Remove buttons
   ============================================================ */
html[data-theme="dark"] .imagecontainer .btn-group {
    display: inline-flex !important;
    gap: 6px;
    margin-top: 6px;
}
html[data-theme="dark"] .imagecontainer .btn-group > .btn {
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    border: 1px solid transparent !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html[data-theme="dark"] .imagecontainer .btn.img-rotate-CW {
    background: #1f2d3d !important;
    color: #f1f5f9 !important;
    border-color: #2a3f54 !important;
}
html[data-theme="dark"] .imagecontainer .btn.img-rotate-CW:hover {
    background: #2a3f54 !important;
    border-color: #3a5068 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .imagecontainer .btn.img-rotate-CW .far,
html[data-theme="dark"] .imagecontainer .btn.img-rotate-CW .fas,
html[data-theme="dark"] .imagecontainer .btn.img-rotate-CW span {
    color: #5ab0e0 !important;
}
html[data-theme="dark"] .imagecontainer .btn.img-delete {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}
html[data-theme="dark"] .imagecontainer .btn.img-delete:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .imagecontainer .btn.img-delete .far,
html[data-theme="dark"] .imagecontainer .btn.img-delete .fas,
html[data-theme="dark"] .imagecontainer .btn.img-delete span {
    color: #ffffff !important;
}

/* ============================================================
   MY MUNICIBID — Watching page (BiddingWatching.cshtml)
   The "Show Completed Auctions" toggle and the per-row Delete
   buttons render as washed-out / low-contrast shapes against
   the dark surface. Give them solid brand fills and a visible
   red outline so they read clearly.
   ============================================================ */

/* Show Completed / Show Active Auctions toggle pill */
html[data-theme="dark"] .showAuctions.btn-primary,
html[data-theme="dark"] a.showAuctions.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .showAuctions.btn-primary:hover,
html[data-theme="dark"] a.showAuctions.btn-primary:hover,
html[data-theme="dark"] .showAuctions.btn-primary:focus,
html[data-theme="dark"] a.showAuctions.btn-primary:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: #ffffff !important;
}

/* Per-row Delete button on watched listings */
html[data-theme="dark"] .watching .btn-outline-danger,
html[data-theme="dark"] [data-selector] .btn-outline-danger {
    background-color: transparent !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .watching .btn-outline-danger:hover,
html[data-theme="dark"] [data-selector] .btn-outline-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* "Remove Selected" primary button at the top of the active list */
html[data-theme="dark"] .watching .btn-primary[name="removeMultiple"],
html[data-theme="dark"] .watching .btn-primary[name="removeMultipleC"] {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* ============================================================
   MY MUNICIBID — Won / purchased auctions rows
   (BiddingWon.cshtml + LineItem_BuyerBoughtRow.cshtml +
    Action_BuyerBought.cshtml)

   The per-row action buttons (Pay Now / View Invoice / Contact /
   Submit Feedback) and the card body text were reading low-contrast
   on the dark page. Give the buttons solid brand fills with white
   text and brighten the card labels so everything is clearly legible.
   ============================================================ */

/* Card body text — labels and values inside the listing summary */
html[data-theme="dark"] .mm-listings .mm-listing-details h1 a,
html[data-theme="dark"] .mm-listings .card-title a,
html[data-theme="dark"] .mm-listings h5.card-title a {
    color: var(--color-primary) !important;
}
html[data-theme="dark"] .mm-listings .mm-listing-details p,
html[data-theme="dark"] .mm-listings .card-body p {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .mm-listings .mm-listing-details p b,
html[data-theme="dark"] .mm-listings .card-body p b {
    color: var(--text-heading) !important;
}

/* Action row container — inherits mm-row-options base styles but the rows
   inside Action_BuyerBought don't need the top border on every listing. */
html[data-theme="dark"] .mm-listings .mm-row-options {
    border-top-color: transparent !important;
}

/* Pay Now (btn-success) — already green, just make sure the icon + text are
   pure white for max contrast on dark bg. */
html[data-theme="dark"] .mm-row-options .btn-success,
html[data-theme="dark"] .mm-listings .btn-success {
    color: #ffffff !important;
}

/* View Invoice / Checkout (btn-primary.btnSubmitCustom or btn-secondary) —
   solid primary blue with white text, darker on hover. */
html[data-theme="dark"] .mm-row-options .btn-primary,
html[data-theme="dark"] .mm-row-options a.btn-primary,
html[data-theme="dark"] .mm-row-options .btnSubmitCustom,
html[data-theme="dark"] .mm-row-options a.btnSubmitCustom,
html[data-theme="dark"] .mm-row-options .btn-secondary,
html[data-theme="dark"] .mm-row-options a.btn-secondary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .mm-row-options .btn-primary:hover,
html[data-theme="dark"] .mm-row-options a.btn-primary:hover,
html[data-theme="dark"] .mm-row-options .btnSubmitCustom:hover,
html[data-theme="dark"] .mm-row-options a.btnSubmitCustom:hover,
html[data-theme="dark"] .mm-row-options .btn-secondary:hover,
html[data-theme="dark"] .mm-row-options a.btn-secondary:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: #ffffff !important;
}

/* Contact button (btn-light) — match the border to the text color so the
   outline is visibly defined against the dark card surface, like a clean
   ghost / outline button. On hover fills solid with darker bg + white text. */
html[data-theme="dark"] .mm-row-options .btn-light,
html[data-theme="dark"] .mm-row-options a.btn-light {
    background-color: transparent !important;
    border-color: var(--text-heading) !important;
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .mm-row-options .btn-light:hover,
html[data-theme="dark"] .mm-row-options a.btn-light:hover {
    background-color: var(--text-heading) !important;
    border-color: var(--text-heading) !important;
    color: #000000 !important;
}

/* ============================================================
   PAYMENT MODAL — Municibid Item Payment
   (UnpaidListingInvoice.cshtml, .pm-* classes)

   The modal is defined with hard-coded light colors inline in the view,
   so we override every surface, border, and text role here for dark mode.
   ============================================================ */

/* Shell */
html[data-theme="dark"] .pm-overlay {
    background: rgba(0, 0, 0, 0.65) !important;
}
html[data-theme="dark"] .pm-modal {
    background: var(--bg-surface) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    color: var(--text-primary) !important;
}

/* Header */
html[data-theme="dark"] .pm-header {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .pm-header h2 {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .pm-close {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .pm-close:hover {
    background: var(--bg-muted) !important;
    color: var(--text-heading) !important;
}

/* Amount Due block */
html[data-theme="dark"] .pm-amount {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .pm-amount h3 {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .pm-amount-row {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .pm-amount-row.pm-total {
    border-top-color: var(--border-color) !important;
    color: var(--text-heading) !important;
}

/* Tabs */
html[data-theme="dark"] .pm-tabs {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .pm-tab {
    color: var(--text-muted) !important;
    background: transparent !important;
}
html[data-theme="dark"] .pm-tab:hover {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .pm-tab.active {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
}

/* "Select a saved card" helper text */
html[data-theme="dark"] .pm-tab-content > p[style*="color:#374151"] {
    color: var(--text-primary) !important;
}

/* Saved cards list */
html[data-theme="dark"] .pm-card {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .pm-card:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"] .pm-card.selected {
    background: rgba(74, 159, 212, 0.12) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"] .pm-card-radio {
    border-color: var(--border-color) !important;
    background: transparent !important;
}
html[data-theme="dark"] .pm-card.selected .pm-card-radio {
    border-color: var(--color-primary) !important;
    background: transparent !important;
}
html[data-theme="dark"] .pm-card.selected .pm-card-radio::after {
    background: var(--color-primary) !important;
}
html[data-theme="dark"] .pm-card-icon {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .pm-card-num {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .pm-card-exp {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .pm-card-primary {
    background: var(--color-primary) !important;
    color: #ffffff !important;
}

/* Loading / empty states */
html[data-theme="dark"] .pm-loading,
html[data-theme="dark"] .pm-no-cards,
html[data-theme="dark"] .pm-placeholder {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .pm-no-cards i,
html[data-theme="dark"] .pm-placeholder i {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .pm-loading i {
    color: var(--color-primary) !important;
}

/* Pay button — keep the brand gradient, just deepen the shadow */
html[data-theme="dark"] .pm-pay-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .pm-pay-btn:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Manage Cards outline link */
html[data-theme="dark"] .pm-manage-link {
    background: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
html[data-theme="dark"] .pm-manage-link:hover {
    background: var(--color-primary) !important;
    color: #ffffff !important;
}

/* Error / ACH / Wire / Success panels */
html[data-theme="dark"] .pm-error {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .pm-ach-info {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .pm-wire-instructions {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .pm-wire-instructions h4 {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .pm-wire-detail {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .pm-wire-label {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .pm-wire-value {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .pm-wire-pending-note {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .pm-success-state h3 {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .pm-success-state p {
    color: var(--text-primary) !important;
}

/* Footer */
html[data-theme="dark"] .pm-footer {
    border-top-color: var(--border-color) !important;
}
html[data-theme="dark"] .pm-security,
html[data-theme="dark"] .pm-powered {
    color: var(--text-muted) !important;
}

/* ============================================================
   INVOICE PAYMENT HISTORY — PaymentHistory.cshtml

   The panel is defined inline with a hard-coded light palette
   (white container, light gray table header, #111827 text). In
   dark mode it rendered as a bright white block at the bottom of
   the Invoice page. Map every surface / border / text role to the
   dark theme variables, and desaturate the status badge colors so
   they stay semantic without blinding contrast.
   ============================================================ */

html[data-theme="dark"] .payment-history-container {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-card) !important;
}
html[data-theme="dark"] .payment-history-header {
    background: var(--bg-surface-alt) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .payment-history-header h1 {
    color: var(--text-heading) !important;
}

/* Empty state */
html[data-theme="dark"] .no-history-message,
html[data-theme="dark"] .no-history-text {
    color: var(--text-muted) !important;
}

/* Table */
html[data-theme="dark"] .payment-history-table thead {
    background: var(--bg-surface-alt) !important;
}
html[data-theme="dark"] .payment-history-table th {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .payment-history-table tbody tr {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .payment-history-table tbody tr:hover {
    background-color: var(--bg-surface-hover) !important;
}
html[data-theme="dark"] .payment-history-table td {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .payment-date {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .payment-provider {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .payment-amount {
    color: var(--text-heading) !important;
}

/* Inline muted authorization code */
html[data-theme="dark"] .payment-history-table small[style*="color: #6b7280"],
html[data-theme="dark"] .payment-history-table small[style*="color: #9ca3af"] {
    color: var(--text-muted) !important;
}

/* Status badges — keep semantic hue, adapt for dark surface */
html[data-theme="dark"] .status-badge.approved {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
}
html[data-theme="dark"] .status-badge.pending {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
}
html[data-theme="dark"] .status-badge.failed {
    background: rgba(220, 38, 38, 0.14) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.45) !important;
}

/* Remove button — red outline that pops on dark */
html[data-theme="dark"] .btn-remove {
    background: transparent !important;
    color: #f87171 !important;
    border-color: #ef4444 !important;
}
html[data-theme="dark"] .btn-remove:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* Mobile card divider inside the provider cell */
html[data-theme="dark"] .mobile-info {
    border-top-color: var(--border-color) !important;
}
html[data-theme="dark"] .mobile-info-amount {
    color: var(--text-heading) !important;
}

/* ============================================================
   ADDRESS MANAGEMENT — AddressManagement.cshtml

   Each address card renders a btn-group with "Primary Address"
   (disabled btn-success), "Set Primary" (btn-primary), "Edit"
   (btn-secondary / btn-outline-secondary), and "Delete"
   (btn-outline-danger). In dark mode the Edit and Primary
   indicator were low-contrast; make every button read clearly.
   ============================================================ */

/* "Primary Address" indicator — disabled btn-success, should read as a clear
   green badge marking the active primary, not a washed-out disabled button. */
html[data-theme="dark"] .btn.btn-success[disabled] {
    background-color: rgba(34, 197, 94, 0.22) !important;
    border-color: rgba(34, 197, 94, 0.55) !important;
    color: #86efac !important;
    opacity: 1 !important;
}

/* Edit button on the primary card — btn-outline-secondary. Pair the border
   with the text color so it reads like a ghost button, not a dim rectangle. */
html[data-theme="dark"] .btn-group .btn-outline-secondary {
    background: transparent !important;
    border-color: var(--text-heading) !important;
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .btn-group .btn-outline-secondary:hover {
    background: var(--text-heading) !important;
    color: #000000 !important;
}

/* Edit button on non-primary cards — btn-secondary. Solid muted surface that
   still pops against the page and sits next to the blue Set Primary. */
html[data-theme="dark"] .btn-group .btn-secondary {
    background-color: var(--bg-surface-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .btn-group .btn-secondary:hover {
    background-color: var(--bg-muted) !important;
    border-color: var(--border-color) !important;
    color: #ffffff !important;
}

/* Delete button — outline danger red, same treatment as the Watching page
   so the visual language stays consistent across My Municibid. */
html[data-theme="dark"] .btn-group .btn-outline-danger {
    background-color: transparent !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .btn-group .btn-outline-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* Separator between address cards */
html[data-theme="dark"] hr {
    border-top-color: var(--border-color) !important;
}

/* ============================================================
   CREDIT CARDS — CreditCards.cshtml + credit-cards.css

   The page ships a hard-coded light palette: white section, light
   gray table header, #32325d table text, light-purple gradient for
   the primary row / banner, and light surfaces for Set Primary /
   Delete buttons. Re-skin every role for dark mode while keeping
   the brand purple accent on the primary card + badges.
   ============================================================ */

/* Main container */
html[data-theme="dark"] .cards-section {
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Page header */
html[data-theme="dark"] .cards-header-modern {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .header-text h2 {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .header-text p {
    color: var(--text-primary) !important;
}
/* .header-icon + .btn-add-card-header keep their purple gradient — it reads fine on dark */

/* Primary Card Banner (the big highlighted block at the top) — user wants a
   uniform dark-blue surface across the whole page, so drop the purple tint
   and match the rest of the section. Keep a subtle border on the left
   accent (::before) from the base rule for visual anchoring. */
html[data-theme="dark"] .primary-card-banner {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .primary-card-icon {
    background: var(--bg-surface) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .primary-card-number {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .primary-card-meta {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .primary-card-meta i {
    color: var(--text-muted) !important;
}
/* .primary-card-label + .primary-card-badge already use brand purple, leave them */

/* Cards table — uniform dark-blue background across header, body, and the
   primary row. Only the border-bottom separator between rows differentiates. */
html[data-theme="dark"] .cards-table th {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .cards-table td {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .cards-table tr:hover {
    background: var(--bg-surface) !important;
}
html[data-theme="dark"] .cards-table tr.primary-row,
html[data-theme="dark"] .cards-table tr.primary-row:hover {
    background: var(--bg-surface) !important;
}
html[data-theme="dark"] .cards-table tr.primary-row td,
html[data-theme="dark"] .cards-table tr:hover td {
    background: var(--bg-surface) !important;
}

/* Card brand cell + brand icon chip */
html[data-theme="dark"] .card-brand-icon {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
}

/* Billing info */
html[data-theme="dark"] .billing-name {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .billing-address {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .no-billing-info {
    color: var(--text-muted) !important;
}

/* Actions column buttons */
html[data-theme="dark"] .btn-set-primary {
    background: var(--bg-surface-hover) !important;
    color: var(--text-heading) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .btn-set-primary:hover {
    background: var(--bg-muted) !important;
    color: #ffffff !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .btn-delete {
    background: rgba(220, 38, 38, 0.14) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.45) !important;
}
html[data-theme="dark"] .btn-delete:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* Empty state (no cards yet) */
html[data-theme="dark"] .empty-state-modern {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .empty-state-title {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .empty-state-description {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .feature-item {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .accepted-cards {
    color: var(--text-muted) !important;
}

/* Delete confirmation modal */
html[data-theme="dark"] #DeleteCardModal .modal-content {
    background: var(--bg-surface) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .delete-modal-icon {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.28)) !important;
}
html[data-theme="dark"] .delete-modal-title {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .delete-modal-message {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .delete-modal-card-info {
    background: var(--bg-surface-alt) !important;
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .delete-modal-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .btn-delete-cancel {
    background: var(--bg-surface-hover) !important;
    color: var(--text-heading) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .btn-delete-cancel:hover {
    background: var(--bg-muted) !important;
    color: #ffffff !important;
}

/* ============================================================
   MESSAGES / INBOX — ViewMessages.cshtml

   The empty state renders as <div class="alert alert-light">, which
   is a Bootstrap light-variant alert (white background, gray text).
   In dark mode it showed as a bright white band on the dark page.
   Also polish the message table row/header bits so inbox/outbox
   tables read cleanly in dark.
   ============================================================ */

html[data-theme="dark"] .alert.alert-light {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Message list table — the header row uses class="active white", which
   otherwise renders with a white background. */
html[data-theme="dark"] .panel .table tr.active.white,
html[data-theme="dark"] .panel .table th.white,
html[data-theme="dark"] .panel .table tr.active.white th {
    background-color: var(--bg-surface) !important;
    color: var(--text-heading) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .panel .table tr.active.white a,
html[data-theme="dark"] .panel .table th.white a {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .panel .table td {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .panel .table td a {
    color: var(--color-primary) !important;
}

/* ============================================================
   BLOG PAGE — DropInBlog widget (/Blog)

   Blog.cshtml embeds DropInBlog (https://dropinblog.com) via an async
   script that injects the list into #dib-posts with its own hard-coded
   light-mode classes. The widget does not expose a dark theme of its
   own, so we reach into its injected markup and re-skin the common
   post-card selectors. Inline styles on individual elements (e.g.
   style="background:#fff") still win over these rules, but covering
   the class-based surfaces gets the card bodies onto dark surfaces
   with readable text.
   ============================================================ */

/* Page shell — main and #dib-posts inline styles already reference CSS
   vars after the Blog.cshtml update, but keep a belt-and-suspenders rule
   in case a cached copy is served. */
html[data-theme="dark"] main,
html[data-theme="dark"] #dib-posts {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* Post cards and containers */
html[data-theme="dark"] #dib-posts [class*="post"],
html[data-theme="dark"] #dib-posts [class*="card"],
html[data-theme="dark"] #dib-posts [class*="article"],
html[data-theme="dark"] #dib-posts [class*="item"] {
    background: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Force text readable on dark card surfaces (widget uses various classes) */
html[data-theme="dark"] #dib-posts h1,
html[data-theme="dark"] #dib-posts h2,
html[data-theme="dark"] #dib-posts h3,
html[data-theme="dark"] #dib-posts h4,
html[data-theme="dark"] #dib-posts h5,
html[data-theme="dark"] #dib-posts h6 {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] #dib-posts p,
html[data-theme="dark"] #dib-posts span,
html[data-theme="dark"] #dib-posts div,
html[data-theme="dark"] #dib-posts li,
html[data-theme="dark"] #dib-posts time {
    color: var(--text-primary) !important;
}

/* Links inside the widget use the brand primary */
html[data-theme="dark"] #dib-posts a {
    color: var(--color-primary) !important;
}
html[data-theme="dark"] #dib-posts a:hover {
    color: var(--text-link-hover) !important;
}

/* Category / tag pills (common DIB class fragments) */
html[data-theme="dark"] #dib-posts [class*="category"],
html[data-theme="dark"] #dib-posts [class*="tag"],
html[data-theme="dark"] #dib-posts [class*="badge"] {
    background: transparent !important;
    color: var(--color-primary) !important;
}

/* Category nav / filter bar at the top of the widget */
html[data-theme="dark"] #dib-posts [class*="nav"],
html[data-theme="dark"] #dib-posts [class*="filter"],
html[data-theme="dark"] #dib-posts [class*="header"] {
    background: var(--bg-surface) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Search input inside the widget */
html[data-theme="dark"] #dib-posts input[type="text"],
html[data-theme="dark"] #dib-posts input[type="search"],
html[data-theme="dark"] #dib-posts select {
    background: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] #dib-posts input::placeholder {
    color: var(--text-muted) !important;
}

/* ============================================================
   CONTACT US — Home/Contact.cshtml

   The hero uses a Ben Franklin Bridge photo with a 0.4-opacity
   purple/blue gradient overlay on top. In dark mode that overlay
   produced a jarringly bright violet block over most of the page.
   Replace it with a dark scrim so the bridge photo still shows
   behind but the panel reads as a proper dark hero. Then polish
   the four contact cards below.
   ============================================================ */

/* Dark scrim over the hero image instead of the bright purple gradient */
html[data-theme="dark"] .hero-contact {
    background-color: var(--bg-body) !important;
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
}
html[data-theme="dark"] .hero-contact:before {
    background-image: linear-gradient(135deg, rgba(15, 25, 35, 0.85) 0%, rgba(22, 34, 49, 0.85) 100%) !important;
    opacity: 1 !important;
}

/* Give the title / paragraph / button group more vertical breathing
   room inside the hero box so it doesn't feel cramped against the edges. */
html[data-theme="dark"] .hero-contact .intro-block {
    padding: 1.5rem 1rem !important;
}
html[data-theme="dark"] .hero-contact h1 {
    margin-bottom: 1.25rem !important;
}
html[data-theme="dark"] .hero-contact p {
    margin-bottom: 1.5rem !important;
}
html[data-theme="dark"] .hero-contact .btn {
    margin-top: 2rem !important;
}

html[data-theme="dark"] .hero-contact h1,
html[data-theme="dark"] .hero-contact p {
    color: #ffffff !important;
}
html[data-theme="dark"] .hero-contact a {
    color: var(--color-primary) !important;
}
html[data-theme="dark"] .hero-contact a:hover {
    color: #ffffff !important;
}

/* Contact cards below — keep the layout, just make every text role
   readable on the dark page and preserve the semantic green / amber
   accents for Quickest / Slowest response time. */
html[data-theme="dark"] .contactus-section h1,
html[data-theme="dark"] .contactus-section h1 a {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .contactus-section h1 a:hover {
    color: var(--color-primary) !important;
}
html[data-theme="dark"] .contactus-section p.subtitle,
html[data-theme="dark"] .contactus-section h2.subtitle,
html[data-theme="dark"] .contactus-section address {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .contactus-section address strong {
    color: var(--text-heading) !important;
}
html[data-theme="dark"] .contactus-section i {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .contactus-emphasis {
    color: #34d399 !important; /* green, brighter for dark */
}
html[data-theme="dark"] .contactus-emphasis-slow {
    color: #fbbf24 !important; /* amber, brighter for dark */
}

/* "Please do not mail..." alert pill under the address card */
html[data-theme="dark"] .contactus-section .registration-form-alertbidder {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #fcd34d !important;
    padding: 0.625rem 0.875rem !important;
    border-radius: 8px !important;
}
html[data-theme="dark"] .contactus-section .registration-form-alertbidder a {
    color: #fde68a !important;
    text-decoration: underline;
}

/* ============================================================
   HOMEPAGE — IndexBidder / IndexGuest / IndexSeller

   The listing cards in the home-body rows use --bg-surface, which is
   lighter than --bg-body. That made each row of cards look like a
   lighter "band" against the darker page, and the gaps between rows
   showed as darker strips. User wants the whole homepage to read as
   one uniform dark blue.

   Collapse cards onto --bg-body so they stop creating lighter bands.
   Mark each card with a subtle border + soft shadow so they are still
   recognizable as cards without introducing a second surface color.
   ============================================================ */

/* Leave .listing-card on its original --bg-surface value from
   custom_homepost.css — cards render as a lighter navy card against
   the darker #0f1923 page bg, which is the original look Ronald
   preferred. Keep the row / panel wrappers transparent so nothing
   behind the cards injects an extra surface tint. */
html[data-theme="dark"] .homepage,
html[data-theme="dark"] .home-body-header,
html[data-theme="dark"] .home-body-row,
html[data-theme="dark"] .home-body-card,
html[data-theme="dark"] .featuredauctions,
html[data-theme="dark"] .locationcategorypanel {
    background: transparent !important;
    background-color: transparent !important;
}

/* Listing detail "Want to bid on this item?" account CTA panel.
   Base rule in custom.css sets background: #214964 (brand blue), which
   reads as a distinct lighter block against the dark page. Drop the
   background and the shadow in dark mode so the panel blends into the
   page and only the stacked buttons + copy stand out. */
html[data-theme="dark"] .itempage-account {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}