/* Dark theme overrides for Bootstrap 5.0 and for elements with fixed colours. Tokens are set in style.css. */
html[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-mid);
}

html[data-theme="dark"] td a, html[data-theme="dark"] .card-body a:not(.btn):not(.dropdown-item):not(.tile) { color: #8ab4ff; }
html[data-theme="dark"] .btn-link { color: #8ab4ff; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text-dark); }
html[data-theme="dark"] hr { border-color: var(--border-color); opacity: 1; }
html[data-theme="dark"] .text-muted { color: var(--text-soft) !important; }
html[data-theme="dark"] .text-dark { color: var(--text-dark) !important; }
html[data-theme="dark"] .text-black { color: var(--text-dark) !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--surface) !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--border-color) !important; }
html[data-theme="dark"] code { color: #f0a8b8; }
html[data-theme="dark"] pre { color: var(--text-mid); }

/* cards, tables, lists */
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .toast {
    background-color: var(--surface);
    color: var(--text-mid);
    border-color: var(--border-color);
}
html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer {
    background-color: var(--surface-alt);
    border-color: var(--border-color);
}
html[data-theme="dark"] .table {
    color: var(--text-mid);
    border-color: var(--border-color);
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-mid);
    --bs-table-striped-color: var(--text-mid);
    --bs-table-hover-color: var(--text-dark);
    --bs-table-active-color: var(--text-dark);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--border-color);
    box-shadow: none;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--surface-alt); }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--surface-hover); }
html[data-theme="dark"] .table-light, html[data-theme="dark"] .table-light > * > * { background-color: var(--surface-alt) !important; color: var(--text-mid) !important; }
html[data-theme="dark"] .table-dark, html[data-theme="dark"] .table-dark > * > * { background-color: #0b0c10 !important; }

/* forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="email"] {
    background-color: var(--surface-alt);
    color: var(--text-dark);
    border-color: var(--border-color);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--surface-alt);
    color: var(--text-dark);
    border-color: #5b84d6;
    box-shadow: 0 0 0 .2rem rgba(91, 132, 214, .25);
}
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-muted); }
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled { background-color: var(--surface-hover); }
html[data-theme="dark"] .form-check-input { background-color: var(--surface-alt); border-color: #4b5160; }
html[data-theme="dark"] .form-check-input:checked { background-color: #5b84d6; border-color: #5b84d6; }
html[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d1d5db' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* buttons: the "dark" buttons turn into light ones */
html[data-theme="dark"] .btn-dark { background-color: #2b303b; border-color: #3a404d; color: var(--text-dark); }
html[data-theme="dark"] .btn-dark:hover, html[data-theme="dark"] .btn-dark:focus, html[data-theme="dark"] .btn-dark:active { background-color: #3a4150; border-color: #4b5160; color: #fff; }
html[data-theme="dark"] .btn-dark.disabled, html[data-theme="dark"] .btn-dark:disabled { background-color: #22262e; border-color: #2a2e37; color: var(--text-muted); opacity: 1; }
html[data-theme="dark"] .btn-outline-dark { color: var(--text-dark); border-color: #4b5160; background-color: transparent; }
html[data-theme="dark"] .btn-outline-dark:hover, html[data-theme="dark"] .btn-outline-dark:focus { background-color: var(--text-dark); border-color: var(--text-dark); color: var(--on-strong); }
html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary {
    background-color: var(--surface-hover); border-color: var(--border-color); color: var(--text-mid);
}
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

/* dropdowns and navigation */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface);
    border-color: var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .dropdown-item { color: var(--text-mid); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--surface-hover); color: var(--text-dark); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--border-color); }
html[data-theme="dark"] .nav-tabs { border-color: var(--border-color); }
html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--surface); border-color: var(--border-color) var(--border-color) var(--surface); color: var(--text-dark); }
html[data-theme="dark"] .pagination .page-link { background-color: var(--surface); border-color: var(--border-color); color: var(--text-mid); }
html[data-theme="dark"] .alert { border-color: var(--border-color); }
html[data-theme="dark"] .alert-warning { background-color: #3a3118; color: #f0d98a; }
html[data-theme="dark"] .alert-danger { background-color: #3d1c22; color: #f3b4bd; }
html[data-theme="dark"] .alert-success { background-color: #16301f; color: #a9dfba; }
html[data-theme="dark"] .alert-info { background-color: #16293d; color: #a9cdf0; }
html[data-theme="dark"] .badge.bg-light { color: var(--text-dark) !important; }
html[data-theme="dark"] .progress { background-color: var(--surface-hover); }

/* black line icons (PNG / SVG) become light */
html[data-theme="dark"] .aop-blend-nav-item-to-color,
html[data-theme="dark"] .aop-dark-invert-icon,
html[data-theme="dark"] .icon-button img,
html[data-theme="dark"] .aop-icon {
    filter: invert(.88);
}
html[data-theme="dark"] .notification-bubble { color: #fff; }

/* the logos of the sign up links are dark: keep a light plate behind them */
html[data-theme="dark"] .logo-tile { background: #e9ecf1; border-color: #e9ecf1; }

html[data-theme="dark"] .alert-secondary, html[data-theme="dark"] .alert-light { background-color: var(--surface-hover); color: var(--text-mid); }
html[data-theme="dark"] .deal-assign-box { background-color: var(--surface-hover) !important; }

/* the black card logo on the login page */
html[data-theme="dark"] #login-box img[src$=".svg"] { filter: invert(.9); }

/* the robot of the test and local system is a dark tile: on the dark sidebar it is a light tile with a ring instead */
html[data-theme="dark"] img[src$="local_favicon.svg"] {
    filter: invert(.88) hue-rotate(180deg);
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--border-color);
}

/* the black logo (cards only, or with the name) in the contact card of the deal overview and on the session lost page */
html[data-theme="dark"] .contact-body img,
html[data-theme="dark"] #login-box img[src$=".png"],
html[data-theme="dark"] #center-box img { filter: invert(.9); }

/* file input: the Browse button */
html[data-theme="dark"] .form-control::file-selector-button,
html[data-theme="dark"] input[type="file"]::file-selector-button {
    background-color: #2b303b;
    color: var(--text-dark);
    border-color: var(--border-color);
}
html[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button,
html[data-theme="dark"] input[type="file"]:hover::file-selector-button {
    background-color: #3a4150;
}

html[data-theme="dark"] .ss-tags { border-color: var(--border-color); background: var(--surface-alt); }
html[data-theme="dark"] .ss-nav a { color: var(--text-mid) !important; }

html[data-theme="dark"] .cl-toggle.on { background: #16301f; border-color: #1f4a2d; color: #a9dfba; }
html[data-theme="dark"] .cl-toggle.warn { background: #3d1c22; border-color: #5a2a33; color: #f3b4bd; }
html[data-theme="dark"] .cl-tab.active { box-shadow: none; }

/* confirmed / unconfirmed accounts and the last edited field */
html[data-theme="dark"] .account-confirmed > td:not(.last-edited-field) { background-color: #16301f !important; color: var(--text-mid); }
html[data-theme="dark"] .account-unconfirmed > td:not(.last-edited-field) { background-color: #3d1c22 !important; color: var(--text-mid); }
html[data-theme="dark"] .last-edited-field { background-color: #3a3118 !important; }
html[data-theme="dark"] .account-confirmed input, html[data-theme="dark"] .account-unconfirmed input { background-color: transparent; }

/* site logos with dark parts get a light plate */
html[data-theme="dark"] img.site-logo { background: #e9ecf1; padding: .25em .7em; border-radius: 10px; box-sizing: content-box; }

html[data-theme="dark"] .aa-chip.warn { background: #3d1c22; color: #f3b4bd; }
html[data-theme="dark"] .aa-chip.ok { background: #16301f; color: #a9dfba; }

/* toasts (vanilla-toast injects its own light style): content from the server can contain headings and rules */
.vt-card h1, .vt-card h2, .vt-card h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem; color: inherit; }
.vt-card hr { opacity: .25; margin: .5rem 0; }
.vt-card pre { margin: 0; white-space: pre-wrap; }
html[data-theme="dark"] .vt-card {
    background-color: var(--surface);
    color: var(--text-dark);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
    outline: 1px solid var(--border-color);
}
html[data-theme="dark"] .vt-card.success { border-left-color: #4caf7a; }
html[data-theme="dark"] .vt-card.warn { border-left-color: #e0b84a; }
html[data-theme="dark"] .vt-card.info { border-left-color: #5b9bff; }
html[data-theme="dark"] .vt-card.error { border-left-color: #ff5a73; }
html[data-theme="dark"] .vt-card a { color: #8ab4ff; }

html[data-theme="dark"] .login-error { background: #3d1c22; color: #f3b4bd; }
html[data-theme="dark"] .login-info { background: #16301f; color: #a9dfba; }
html[data-theme="dark"] #login-box { box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }

html[data-theme="dark"] .dl-card, html[data-theme="dark"] .dl-side { border-color: var(--border-color); }

/* the status pills and icons of the home page */
html[data-theme="dark"] .balance-status.owed, html[data-theme="dark"] .tx-icon.in { background: #16301f; color: #a9dfba; }
html[data-theme="dark"] .balance-status.owes, html[data-theme="dark"] .tx-icon.out { background: #3d1c22; color: #f3b4bd; }
html[data-theme="dark"] .balance-status.settled { background: #2b303b; color: var(--text-dark); }

/* the black card logo (with or without the name) at the top of the sidebar is light on the dark sidebar */
html[data-theme="dark"] .sidebar #logo[src$="logo_cards_only.svg"],
html[data-theme="dark"] .sidebar #logo[src$="logo.svg"] { filter: invert(.9); }