/* ============================================================
   ERP GLOBAL STYLESHEET
   Branding colours are supplied dynamically by Settings:
   --erp-primary
   --erp-primary-dark
   --erp-secondary
   ============================================================ */


/* ============================================================
   THEME VARIABLES
   ============================================================ */

:root,
html[data-theme="light"],
body[data-theme="light"],
body.light {

    --theme-primary: var(--erp-primary, #008b6a);
    --theme-primary-dark: var(--erp-primary-dark, #006f55);
    --theme-secondary: var(--erp-secondary, #E15483);

    --theme-bg: #f5f7f9;
    --theme-surface: #ffffff;
    --theme-surface-alt: #f8f9fa;

    --theme-text: #212529;
    --theme-text-muted: #66717c;

    --theme-border: #aeb7c0;
    --theme-border-light: #d7dde3;

    --theme-input-bg: #ffffff;
    --theme-input-text: #212529;
    --theme-input-border: #8d99a5;

    --theme-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08);

    --theme-shadow-lg:
        0 4px 18px rgba(0, 0, 0, 0.13);

    --theme-warning: #f59e0b;
    --theme-danger: #dc3545;
    --theme-success: #198754;
}


/* ============================================================
   DARK THEME
   Supports data-theme on either HTML or BODY
   ============================================================ */

html[data-theme="dark"],
body[data-theme="dark"],
body.dark {

    --theme-bg: #101820;
    --theme-surface: #19232d;
    --theme-surface-alt: #222e39;

    --theme-text: #edf2f6;
    --theme-text-muted: #b4c0ca;

    --theme-border: #596978;
    --theme-border-light: #394957;

    --theme-input-bg: #111b24;
    --theme-input-text: #f5f7f9;
    --theme-input-border: #718292;

    --theme-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35);

    --theme-shadow-lg:
        0 4px 18px rgba(0, 0, 0, 0.48);
}


/* ============================================================
   BASE
   ============================================================ */

html,
body {
    min-height: 100%;
}

body {
    font-family:
        "Figtree",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background-color: var(--theme-bg);
    color: var(--theme-text);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


h1,
h2,
h3,
h4,
h5,
h6,
.card-header,
thead th,
.erp-heading {
    font-family:
        "Barlow Condensed",
        "Barlow",
        "Segoe UI",
        sans-serif;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--theme-text);
}


h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--theme-primary);
    margin-bottom: 0.25rem;
}


p,
label,
span,
div {
    border-color: var(--theme-border-light);
}


a {
    color: var(--theme-primary);
}

a:hover {
    color: var(--theme-primary-dark);
}


/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
    background-color: var(--theme-primary) !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.18);

    margin-bottom: 0;

    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}


.navbar-brand {
    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.04em;

    color: #ffffff !important;
}


.navbar .nav-link {
    color:
        rgba(255, 255, 255, 0.9) !important;

    font-weight: 500;

    padding:
        0.4rem 0.65rem;

    border-radius:
        0.35rem;

    transition:
        background 0.15s,
        color 0.15s;
}


.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #ffffff !important;

    background:
        rgba(255, 255, 255, 0.18);
}


.navbar .nav-link.fp-nav-active,
.navbar .nav-link.erp-nav-active {
    color: #ffffff !important;

    background:
        rgba(0, 0, 0, 0.18);

    font-weight: 700;
}


.navbar-toggler {
    border-color:
        rgba(255, 255, 255, 0.55);
}


.navbar-toggler-icon {
    filter: invert(1);
}


.fp-navbar-logo,
.erp-navbar-logo {
    height: 32px;
    width: auto;
}


/* ============================================================
   THEME BUTTONS
   ============================================================ */

.btn-fp-theme,
.btn-erp-theme {

    background: transparent;
    border: 1px solid transparent;

    color:
        rgba(255, 255, 255, 0.9);

    font-size: 1.05rem;

    padding:
        0.35rem 0.45rem;

    border-radius:
        0.35rem;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.15s,
        border-color 0.15s;
}


.btn-fp-theme:hover,
.btn-erp-theme:hover {

    background:
        rgba(255, 255, 255, 0.2);

    color: #ffffff;
}


.btn-fp-theme.fp-theme-active,
.btn-erp-theme.erp-theme-active {

    background:
        rgba(0, 0, 0, 0.22);

    border-color:
        rgba(255, 255, 255, 0.3);

    color: #ffffff;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {

    background-color:
        var(--theme-primary) !important;

    border-color:
        var(--theme-primary) !important;

    color:
        #ffffff !important;

    font-weight: 600;
}


.btn-primary:hover,
.btn-primary:focus {

    background-color:
        var(--theme-primary-dark) !important;

    border-color:
        var(--theme-primary-dark) !important;
}


.btn-outline-primary {

    color:
        var(--theme-primary) !important;

    border-color:
        var(--theme-primary) !important;
}


.btn-outline-primary:hover,
.btn-outline-primary:focus {

    background-color:
        var(--theme-primary) !important;

    border-color:
        var(--theme-primary) !important;

    color:
        #ffffff !important;
}


.btn-secondary {

    background-color:
        #495057 !important;

    border-color:
        #495057 !important;

    color:
        #ffffff !important;
}


.btn-outline-secondary {

    color:
        var(--theme-text) !important;

    border-color:
        var(--theme-border) !important;
}


.btn-outline-secondary:hover {

    background-color:
        var(--theme-surface-alt) !important;

    color:
        var(--theme-text) !important;
}


.btn-outline-secondary.btn-sm {
    border-radius: 20px;
}


/* ============================================================
   CARDS
   ============================================================ */

.card {

    background-color:
        var(--theme-surface);

    color:
        var(--theme-text);

    border:
        1px solid var(--theme-border-light);

    border-top:
        3px solid var(--theme-primary);

    border-radius:
        0.6rem;

    box-shadow:
        var(--theme-shadow);

    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


.card:hover {
    box-shadow:
        var(--theme-shadow-lg);
}


.card-header {

    background-color:
        var(--theme-primary);

    color:
        #ffffff;

    border-bottom:
        1px solid var(--theme-primary-dark);

    font-weight: 600;
    font-size: 1rem;

    padding:
        0.6rem 1rem;

    border-radius:
        0 !important;
}


.card-body {

    background-color:
        var(--theme-surface);

    color:
        var(--theme-text);
}


.card-footer {

    background-color:
        var(--theme-surface-alt);

    color:
        var(--theme-text);

    border-color:
        var(--theme-border-light);
}


/* ============================================================
   FORMS / SEARCH / INPUTS
   ============================================================ */

.form-label {

    color:
        var(--theme-text) !important;

    font-weight: 600;

    margin-bottom:
        0.35rem;
}


.form-control,
.form-select {

    background-color:
        var(--theme-input-bg) !important;

    color:
        var(--theme-input-text) !important;

    border:
        1.5px solid var(--theme-input-border) !important;

    border-radius:
        0.4rem;

    min-height:
        38px;

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.04);

    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        background-color 0.15s;
}


.form-control:hover,
.form-select:hover {

    border-color:
        var(--theme-primary) !important;
}


.form-control:focus,
.form-select:focus {

    background-color:
        var(--theme-input-bg) !important;

    color:
        var(--theme-input-text) !important;

    border-color:
        var(--theme-primary) !important;

    box-shadow:
        0 0 0 0.2rem
        color-mix(
            in srgb,
            var(--theme-primary) 22%,
            transparent
        ) !important;

    outline:
        none !important;
}


.form-control::placeholder {

    color:
        var(--theme-text-muted) !important;

    opacity:
        0.9;
}


.form-control:disabled,
.form-control[readonly],
.form-select:disabled {

    background-color:
        var(--theme-surface-alt) !important;

    color:
        var(--theme-text-muted) !important;

    border-color:
        var(--theme-border) !important;

    opacity:
        1;
}


textarea.form-control {
    min-height: 90px;
}


.input-group-text {

    background-color:
        var(--theme-surface-alt) !important;

    color:
        var(--theme-text) !important;

    border:
        1.5px solid var(--theme-input-border) !important;
}


.form-check-input {

    background-color:
        var(--theme-input-bg);

    border:
        1.5px solid var(--theme-input-border);
}


.form-check-input:checked {

    background-color:
        var(--theme-primary);

    border-color:
        var(--theme-primary);
}


.form-check-input:focus {

    border-color:
        var(--theme-primary);

    box-shadow:
        0 0 0 0.2rem
        color-mix(
            in srgb,
            var(--theme-primary) 20%,
            transparent
        );
}


/* Native inputs */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="tel"],
input[type="url"],
textarea,
select {

    background-color:
        var(--theme-input-bg);

    color:
        var(--theme-input-text);

    border-color:
        var(--theme-input-border);
}


/* Browser autofill */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {

    -webkit-text-fill-color:
        var(--theme-input-text);

    transition:
        background-color 9999s ease-in-out 0s;
}


/* Select dropdown */

.form-select option {

    background:
        var(--theme-input-bg);

    color:
        var(--theme-input-text);
}


/* ============================================================
   TABLES
   ============================================================ */

.table {

    --bs-table-bg:
        var(--theme-surface);

    --bs-table-color:
        var(--theme-text);

    --bs-table-border-color:
        var(--theme-border-light);

    --bs-table-striped-bg:
        var(--theme-surface-alt);

    --bs-table-striped-color:
        var(--theme-text);

    --bs-table-hover-bg:
        color-mix(
            in srgb,
            var(--theme-primary) 8%,
            var(--theme-surface)
        );

    --bs-table-hover-color:
        var(--theme-text);

    color:
        var(--theme-text);
}


.table > :not(caption) > * > * {

    color:
        var(--theme-text);

    background-color:
        var(--bs-table-bg);

    border-color:
        var(--theme-border-light);
}


.table thead th,
.table thead.table-dark th {

    background-color:
        var(--theme-primary) !important;

    color:
        #ffffff !important;

    border-color:
        var(--theme-primary-dark) !important;

    font-size:
        0.88rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.05em;

    padding:
        0.55rem 0.75rem;
}


.table-striped > tbody > tr:nth-of-type(odd) > * {

    background-color:
        var(--theme-surface-alt);

    color:
        var(--theme-text);
}


.table tbody tr:hover > * {

    background-color:
        color-mix(
            in srgb,
            var(--theme-primary) 8%,
            var(--theme-surface)
        );

    color:
        var(--theme-text);
}


/* Status table rows */

.table-danger > * {

    background-color:
        color-mix(
            in srgb,
            #dc3545 14%,
            var(--theme-surface)
        ) !important;

    color:
        var(--theme-text) !important;
}


.table-warning > * {

    background-color:
        color-mix(
            in srgb,
            #ffc107 18%,
            var(--theme-surface)
        ) !important;

    color:
        var(--theme-text) !important;
}


.table-success > * {

    background-color:
        color-mix(
            in srgb,
            #198754 13%,
            var(--theme-surface)
        ) !important;

    color:
        var(--theme-text) !important;
}


/* ============================================================
   BADGES
   ============================================================ */

.badge {

    font-size:
        0.74rem;

    padding:
        0.3em 0.65em;

    border-radius:
        0.4rem;

    font-weight:
        600;
}


.badge.bg-primary {

    background-color:
        var(--theme-primary) !important;
}


/* ============================================================
   TEXT
   ============================================================ */

.text-muted {

    color:
        var(--theme-text-muted) !important;
}


.text-body {

    color:
        var(--theme-text) !important;
}


/* ============================================================
   LIST GROUPS
   ============================================================ */

.list-group-item {

    background-color:
        var(--theme-surface);

    color:
        var(--theme-text);

    border-color:
        var(--theme-border-light);
}


/* ============================================================
   DROPDOWNS
   ============================================================ */

.dropdown-menu {

    background-color:
        var(--theme-surface);

    color:
        var(--theme-text);

    border:
        1px solid var(--theme-border);

    box-shadow:
        var(--theme-shadow-lg);
}


.dropdown-item {

    color:
        var(--theme-text);
}


.dropdown-item:hover,
.dropdown-item:focus {

    background-color:
        var(--theme-surface-alt);

    color:
        var(--theme-text);
}


/* ============================================================
   MODALS
   ============================================================ */

.modal-content {

    background-color:
        var(--theme-surface);

    color:
        var(--theme-text);

    border:
        1px solid var(--theme-border);
}


.modal-header,
.modal-footer {

    border-color:
        var(--theme-border-light);
}


html[data-theme="dark"] .btn-close,
body[data-theme="dark"] .btn-close,
body.dark .btn-close {

    filter:
        invert(1);
}


/* ============================================================
   PAGINATION
   ============================================================ */

.page-link {

    background-color:
        var(--theme-surface);

    color:
        var(--theme-primary);

    border-color:
        var(--theme-border);
}


.page-link:hover {

    background-color:
        var(--theme-surface-alt);

    color:
        var(--theme-primary-dark);
}


.page-item.active .page-link {

    background-color:
        var(--theme-primary) !important;

    border-color:
        var(--theme-primary) !important;

    color:
        #ffffff !important;
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert-success {

    background-color:
        color-mix(
            in srgb,
            #198754 15%,
            var(--theme-surface)
        ) !important;

    border-color:
        #198754 !important;

    color:
        var(--theme-text) !important;
}


.alert-info,
.alert-primary {

    background-color:
        color-mix(
            in srgb,
            var(--theme-primary) 12%,
            var(--theme-surface)
        ) !important;

    border-color:
        var(--theme-primary) !important;

    color:
        var(--theme-text) !important;
}


.alert-warning {

    background-color:
        color-mix(
            in srgb,
            #ffc107 18%,
            var(--theme-surface)
        ) !important;

    border-color:
        #d99a00 !important;

    color:
        var(--theme-text) !important;
}


.alert-danger {

    background-color:
        color-mix(
            in srgb,
            #dc3545 14%,
            var(--theme-surface)
        ) !important;

    border-color:
        #dc3545 !important;

    color:
        var(--theme-text) !important;
}


/* ============================================================
   HOME / DASHBOARD STAT CARDS
   ============================================================ */

.fp-stat-card,
.erp-stat-card {

    background:
        var(--theme-surface);

    border:
        1px solid var(--theme-border-light);

    border-top:
        3px solid var(--theme-primary);

    border-radius:
        0.6rem;

    padding:
        1.25rem 1.5rem;

    box-shadow:
        var(--theme-shadow);

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.25rem;

    text-decoration:
        none;

    color:
        var(--theme-text);

    transition:
        box-shadow 0.15s,
        transform 0.15s;
}


.fp-stat-card:hover,
.erp-stat-card:hover {

    box-shadow:
        var(--theme-shadow-lg);

    transform:
        translateY(-2px);

    color:
        var(--theme-text);
}


.fp-stat-card .fp-stat-icon,
.erp-stat-card .erp-stat-icon {

    font-size:
        1.7rem;

    color:
        var(--theme-primary);

    line-height:
        1;
}


.fp-stat-card .fp-stat-label,
.erp-stat-card .erp-stat-label {

    font-size:
        0.8rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

    color:
        var(--theme-text-muted);
}


.fp-stat-card .fp-stat-value,
.erp-stat-card .erp-stat-value {

    font-size:
        2rem;

    font-weight:
        700;

    line-height:
        1;

    color:
        var(--theme-primary);
}


.fp-stat-card .fp-stat-title,
.erp-stat-card .erp-stat-title {

    font-weight:
        600;

    font-size:
        1rem;
}


/* ============================================================
   QUICK ACTIONS
   ============================================================ */

.fp-action-btn,
.erp-action-btn {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0.25rem;

    padding:
        1.25rem 1.5rem;

    border-radius:
        0.6rem;

    transition:
        box-shadow 0.15s,
        transform 0.15s;

    text-align:
        left;
}


.fp-action-btn:hover,
.erp-action-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--theme-shadow-lg);
}


/* ============================================================
   LOGIN
   ============================================================ */

.fp-login-bg,
.erp-login-bg {

    min-height:
        calc(100vh - 80px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--theme-primary) 12%,
                var(--theme-bg)
            ) 0%,
            var(--theme-bg) 60%
        );

    padding:
        2rem 1rem;
}


.fp-login-card,
.erp-login-card {

    width:
        100%;

    max-width:
        420px;

    background:
        var(--theme-surface);

    border-radius:
        0.75rem;

    box-shadow:
        var(--theme-shadow-lg);

    overflow:
        hidden;

    border:
        1px solid var(--theme-border);
}


.fp-login-header,
.erp-login-header {

    background:
        var(--theme-primary);

    padding:
        2rem 2rem 1.5rem;

    text-align:
        center;

    color:
        #ffffff;
}


.fp-login-header .fp-login-wordmark,
.erp-login-header .erp-login-wordmark {

    font-size:
        2rem;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    line-height:
        1.1;

    color:
        #ffffff;
}


.fp-login-logo,
.erp-login-logo {

    height:
        56px;

    width:
        auto;
}


.fp-login-body,
.erp-login-body {

    padding:
        2rem;
}


/* ============================================================
   GREETING
   ============================================================ */

.fp-greeting,
.erp-greeting {

    background:
        linear-gradient(
            90deg,
            var(--theme-primary) 0%,
            var(--theme-primary-dark) 100%
        );

    color:
        #ffffff;

    border-radius:
        0.6rem;

    padding:
        1rem 1.5rem;

    margin-bottom:
        1.5rem;

    display:
        flex;

    align-items:
        center;

    gap:
        0.75rem;
}


.fp-greeting h2,
.erp-greeting h2 {

    color:
        #ffffff;

    margin:
        0;

    font-size:
        1.5rem;
}


/* ============================================================
   FINANCE
   ============================================================ */

.finance-dashboard {

    display:
        flex;

    gap:
        16px;

    flex-wrap:
        wrap;

    margin-bottom:
        24px;
}


.finance-dashboard .box {

    background:
        var(--theme-surface);

    border:
        1px solid var(--theme-border-light);

    border-top:
        3px solid var(--theme-primary);

    padding:
        18px 22px;

    border-radius:
        0.6rem;

    min-width:
        180px;

    text-align:
        center;

    box-shadow:
        var(--theme-shadow);
}


.finance-dashboard .box strong {

    display:
        block;

    font-size:
        1.5rem;

    color:
        var(--theme-primary);
}


.finance-dashboard .box span {

    font-size:
        0.82rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.07em;

    color:
        var(--theme-text-muted);
}


/* ============================================================
   MISC
   ============================================================ */

hr {

    border-color:
        var(--theme-border-light);

    opacity:
        1;

    margin:
        0.75rem 0 1.25rem;
}


.container.mb-4 {

    margin-top:
        1.5rem !important;
}


/* Make Bootstrap light backgrounds follow theme */

.bg-body,
.bg-white,
.bg-light {

    background-color:
        var(--theme-surface) !important;

    color:
        var(--theme-text) !important;
}


/* Ensure borders remain visible */

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {

    border-color:
        var(--theme-border-light) !important;
}


/* ============================================================
   DARK MODE BOOTSTRAP FIXES
   ============================================================ */

html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"],
body.dark {

    background-color:
        var(--theme-bg) !important;

    color:
        var(--theme-text) !important;
}


html[data-theme="dark"] .text-dark,
body[data-theme="dark"] .text-dark,
body.dark .text-dark {

    color:
        var(--theme-text) !important;
}


html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
body[data-theme="dark"] .bg-white,
body[data-theme="dark"] .bg-light,
body.dark .bg-white,
body.dark .bg-light {

    background-color:
        var(--theme-surface) !important;

    color:
        var(--theme-text) !important;
}
/* Boomerang logo contrast: keep branding readable regardless of client theme. */
.fp-brand-logo-shell { background:#fff; border-radius:10px; padding:4px 8px; display:inline-flex; align-items:center; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.fp-login-header .fp-brand-logo-shell { padding:12px 18px; margin-bottom:10px; }
.fp-login-header .fp-login-logo { height:96px; max-height:96px !important; width:auto; }
.navbar-brand .fp-brand-logo-shell { padding:3px 7px; border-radius:8px; }
.navbar-brand .fp-navbar-logo { height:34px; }


/* ============================================================
   DARK MODE CONTRAST - GLOBAL FINAL FIX
   Keep client accent colours for controls, but never use a dark
   accent for page/section text on the dark application canvas.
   ============================================================ */
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(--theme-text) !important;
}

html[data-theme="dark"] h1 i,
html[data-theme="dark"] h2 i,
html[data-theme="dark"] h3 i,
html[data-theme="dark"] h4 i,
html[data-theme="dark"] h5 i,
html[data-theme="dark"] h6 i,
html[data-theme="dark"] h1 svg,
html[data-theme="dark"] h2 svg,
html[data-theme="dark"] h3 svg {
    color: inherit !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-body-emphasis {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] small.text-muted,
html[data-theme="dark"] .card-text.text-muted {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] label,
html[data-theme="dark"] legend,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .col-form-label {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-body {
    color: var(--theme-text);
    border-color: var(--theme-border-light);
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .table-light {
    background-color: var(--theme-surface-alt) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    color: var(--theme-text);
    border-color: var(--theme-border-light);
}

html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn.disabled,
html[data-theme="dark"] button:disabled {
    color: var(--theme-text-muted) !important;
    border-color: var(--theme-border) !important;
    opacity: .72;
}

/* Technical/admin pages contain older Bootstrap helper classes. */
html[data-theme="dark"] main > .container h1,
html[data-theme="dark"] main > .container h2,
html[data-theme="dark"] main > .container h3,
html[data-theme="dark"] .container h1,
html[data-theme="dark"] .container h2,
html[data-theme="dark"] .container h3,
html[data-theme="dark"] .container-fluid h1,
html[data-theme="dark"] .container-fluid h2,
html[data-theme="dark"] .container-fluid h3 {
    color: var(--theme-text) !important;
}