/* ==========================================================================
   Pure Management — design system (Material 3 / Flutter look)
   Global tokens + restyle of the existing Bootstrap classes, so no page
   markup has to change for the new look to apply.
   ========================================================================== */

:root {
    /* Colour roles (seeded from the existing brand blue #185f8a) */
    --md-primary: #185f8a;
    --md-primary-hover: #14537a;
    --md-on-primary: #ffffff;
    --md-primary-container: #d2e6f4;
    --md-on-primary-container: #001e30;
    --md-secondary-container: #dde8f0;
    --md-on-secondary-container: #0e2a3b;

    --md-bg: #f5f8fa;
    --md-surface: #ffffff;
    --md-surface-low: #f6f9fb;
    --md-surface-container: #edf2f6;
    --md-outline: #aebbc5;
    --md-outline-variant: #dce4ea;
    --md-on-surface: #182630;
    --md-on-surface-variant: #52626d;

    --md-error: #ba1a1a;
    --md-error-container: #fde8e6;
    --md-on-error-container: #6a0b0b;
    --md-success: #2c7a4b;
    --md-success-container: #d9f0e2;
    --md-on-success-container: #0b3a1f;
    --md-warning-container: #fff0cc;
    --md-on-warning-container: #5b3c00;
    --md-info-container: #d9ecf7;
    --md-on-info-container: #0d3a55;

    /* Shape */
    --md-radius-xs: 4px;
    --md-radius-sm: 8px;
    --md-radius-md: 12px;
    --md-radius-lg: 16px;
    --md-radius-xl: 28px;

    /* Elevation */
    --md-elev-1: 0 1px 2px rgba(16, 38, 52, .08), 0 1px 3px rgba(16, 38, 52, .06);
    --md-elev-3: 0 8px 24px rgba(16, 38, 52, .16), 0 2px 6px rgba(16, 38, 52, .08);

    --md-ease: cubic-bezier(.2, 0, 0, 1);

    /* Bootstrap bridge */
    --bs-body-font-family: Roboto, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--md-on-surface);
    --bs-body-bg: var(--md-bg);
    --bs-primary: var(--md-primary);
    --bs-primary-rgb: 24, 95, 138;
    --bs-link-color: var(--md-primary);
    --bs-link-hover-color: var(--md-primary-hover);
    --bs-border-color: var(--md-outline-variant);
    --bs-secondary-color: var(--md-on-surface-variant);
    --bs-backdrop-bg: #0a141c;
    --bs-backdrop-opacity: .4;
}

html, body {
    font-family: var(--bs-body-font-family);
    background: var(--md-bg);
    color: var(--md-on-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a, .btn-link { color: var(--md-primary); text-decoration: none; }
a:hover { color: var(--md-primary-hover); text-decoration: underline; }
.btn:hover, .nav-link:hover, .card a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { color: var(--md-on-surface); }
h1:focus { outline: none; }
h2.fw-bold, h3 { font-weight: 500 !important; letter-spacing: 0; }
h2.fw-bold { font-size: 1.5rem; line-height: 2rem; }
h3 { font-size: 1.375rem; }
h5, .h5 { font-size: 1rem; font-weight: 500; }

.text-muted { color: var(--md-on-surface-variant) !important; }

::selection { background: var(--md-primary-container); }

/* ----- Scrollbars ----- */
* { scrollbar-width: thin; scrollbar-color: var(--md-outline) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--md-outline); background-clip: content-box; border: 2px solid transparent; }

/* ----- Page container & headers ----- */
.content { background: transparent; }
.content > .container-fluid,
.content > .container {
    padding: 0;
    max-width: 1480px;
    margin-left: 0;
    margin-right: auto;
}
.content > .container-fluid.mt-4,
.content > .container.mt-4 { margin-top: 0 !important; }

/* Page header block (title + subtitle + badge/actions) */
.content > .container-fluid > .d-flex.justify-content-between.mb-4,
.content > .container-fluid > h2 {
    margin-bottom: 1.5rem !important;
}
.content > .container-fluid > h2 + p { margin-top: -1rem; margin-bottom: 1.5rem; }

/* ----- Cards ----- */
.card {
    --bs-card-border-color: var(--md-outline-variant);
    --bs-card-border-radius: var(--md-radius-md);
    --bs-card-inner-border-radius: calc(var(--md-radius-md) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-bg: var(--md-surface);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-md);
    box-shadow: none;
    overflow: hidden;
}
.shadow-sm, .card.shadow-sm { box-shadow: none !important; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--md-outline-variant);
    padding: 1rem 1.25rem;
    font-size: .9375rem;
}
.card-header strong { font-weight: 500; }
.card-title { font-size: 1rem; font-weight: 500; margin-bottom: 1rem; }
.card-body.text-center.py-5 { color: var(--md-on-surface-variant); }

/* Cards that only wrap a table: edge-to-edge */
.card-body.table-responsive,
.card-body:has(> .table-responsive:only-child) { padding: 0; }

.bg-light { background-color: var(--md-surface-low) !important; }
.border-bottom { border-color: var(--md-outline-variant) !important; }

/* ----- Buttons (filled / tonal / outlined / text) ----- */
.btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 999px;
    --bs-btn-border-width: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.5rem;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color .15s var(--md-ease), box-shadow .15s var(--md-ease), border-color .15s var(--md-ease), color .15s var(--md-ease);
}
.btn .bi, .btn .spinner-border { margin: 0 !important; }
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-font-size: .8125rem; height: 2rem; }
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-font-size: .9375rem; height: 3rem; }
.btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; box-shadow: none; }
.btn:focus, .btn:active:focus { box-shadow: none; }

.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--md-primary); --bs-btn-border-color: var(--md-primary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--md-primary-hover); --bs-btn-hover-border-color: var(--md-primary-hover);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #104562; --bs-btn-active-border-color: #104562;
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover { box-shadow: var(--md-elev-1); }

.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--md-success); --bs-btn-border-color: var(--md-success);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #246640; --bs-btn-hover-border-color: #246640;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1d5233; --bs-btn-active-border-color: #1d5233;
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--md-error); --bs-btn-border-color: var(--md-error);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #9c1414; --bs-btn-hover-border-color: #9c1414;
}
/* secondary = tonal */
.btn-secondary {
    --bs-btn-color: var(--md-on-secondary-container); --bs-btn-bg: var(--md-secondary-container); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--md-on-secondary-container); --bs-btn-hover-bg: #cfdde8; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--md-on-secondary-container); --bs-btn-active-bg: #c4d5e2; --bs-btn-active-border-color: transparent;
}
/* outlined */
.btn-outline-primary {
    --bs-btn-color: var(--md-primary); --bs-btn-border-color: var(--md-outline);
    --bs-btn-hover-color: var(--md-primary); --bs-btn-hover-bg: rgba(24, 95, 138, .08); --bs-btn-hover-border-color: var(--md-primary);
    --bs-btn-active-color: var(--md-primary); --bs-btn-active-bg: rgba(24, 95, 138, .14); --bs-btn-active-border-color: var(--md-primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--md-on-surface-variant); --bs-btn-border-color: var(--md-outline);
    --bs-btn-hover-color: var(--md-on-surface); --bs-btn-hover-bg: rgba(24, 38, 48, .06); --bs-btn-hover-border-color: var(--md-outline);
    --bs-btn-active-color: var(--md-on-surface); --bs-btn-active-bg: rgba(24, 38, 48, .1); --bs-btn-active-border-color: var(--md-outline);
}
/* text button */
.btn-link {
    --bs-btn-color: var(--md-primary); --bs-btn-hover-color: var(--md-primary-hover);
    --bs-btn-padding-x: .75rem;
    border-color: transparent; font-weight: 500; text-decoration: none;
}
.btn-link:hover { background: rgba(24, 95, 138, .08); }
.btn-link.p-0 { display: inline; height: auto; font-weight: 500; border-radius: var(--md-radius-xs); }
.btn-link.p-0:hover { background: none; text-decoration: underline; }

/* disabled (Material disabled colours) */
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    opacity: 1;
    background-color: rgba(24, 38, 48, .1);
    border-color: transparent;
    color: rgba(24, 38, 48, .38);
    box-shadow: none;
    cursor: not-allowed;
}
.btn-outline-primary:disabled, .btn-outline-secondary:disabled, .btn-link:disabled {
    background-color: transparent;
    border-color: var(--md-outline-variant);
}
.btn-link:disabled { border-color: transparent; }

/* segmented pagination (Previous / Next) */
.btn-group > .btn { --bs-btn-padding-x: 1rem; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }
.btn-group > .btn-outline-secondary:not(:disabled):hover { z-index: 1; }

/* icon-button close */
.btn-close {
    width: 2.5rem; height: 2.5rem; padding: 0; margin: 0;
    border-radius: 50%;
    background-size: .875rem;
    opacity: .6;
    transition: background-color .15s var(--md-ease), opacity .15s var(--md-ease);
}
.btn-close:hover { opacity: 1; background-color: rgba(24, 38, 48, .08); }
.btn-close:focus { box-shadow: none; }
.btn-close:focus-visible { outline: 2px solid var(--md-primary); }

/* Buttons that sit beside a field match its height */
.row.align-items-end > [class*="col"] > .btn { height: 3rem; }

/* ----- Form fields (outlined text field) ----- */
.form-label {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--md-on-surface-variant);
    margin-bottom: .375rem;
}
.form-control, .form-select {
    height: 3rem;
    padding: .5rem .875rem;
    font-size: .9375rem;
    color: var(--md-on-surface);
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-radius-sm);
    box-shadow: none;
    transition: border-color .15s var(--md-ease), box-shadow .15s var(--md-ease);
}
textarea.form-control { height: auto; }
.form-control-sm, .form-select-sm { height: 2.25rem; font-size: .875rem; }
.form-control::placeholder { color: #8796a1; }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: var(--md-on-surface-variant); }
.form-control:focus, .form-select:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 1px var(--md-primary);
    background-color: var(--md-surface);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--md-surface-container);
    color: rgba(24, 38, 48, .6);
    border-color: var(--md-outline-variant);
}
.form-select { background-position: right .875rem center; padding-right: 2.5rem; }

.form-check-input {
    width: 1.125rem; height: 1.125rem; margin-top: .15rem;
    border: 2px solid var(--md-on-surface-variant);
    border-radius: 2px;
    box-shadow: none;
}
.form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(24, 95, 138, .16); border-color: var(--md-primary); }
input[type="checkbox"]:not(.form-check-input), input[type="radio"]:not(.form-check-input) {
    width: 1.125rem; height: 1.125rem; accent-color: var(--md-primary); cursor: pointer; vertical-align: middle;
}

/* raw <input type=file> (InputFile) */
input[type="file"] {
    display: block; width: 100%; max-width: 32rem;
    padding: .5rem; font-size: .875rem; color: var(--md-on-surface-variant);
    background: var(--md-surface-low);
    border: 1px dashed var(--md-outline); border-radius: var(--md-radius-sm);
}
input[type="file"]::file-selector-button, .form-control[type="file"]::file-selector-button {
    margin-right: .875rem; height: 2rem; padding: 0 1rem;
    border: 0; border-radius: 999px;
    background: var(--md-secondary-container); color: var(--md-on-secondary-container);
    font-weight: 500; font-size: .8125rem; cursor: pointer;
}
input[type="file"]:hover::file-selector-button { background: #cfdde8; }

/* Validation */
.valid.modified:not([type=checkbox]) { border-color: var(--md-success); box-shadow: none; outline: none; }
.invalid { border-color: var(--md-error) !important; box-shadow: 0 0 0 1px var(--md-error) !important; outline: none; }
.validation-message, .field-validation-error { color: var(--md-error); font-size: .75rem; margin-top: .25rem; display: block; }
.field-validation-valid:empty { display: none; }
.validation-errors { color: var(--md-error); font-size: .8125rem; }

/* ----- Tables ----- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--md-on-surface);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: rgba(24, 95, 138, .05);
    --bs-table-border-color: var(--md-outline-variant);
    font-size: .875rem;
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .875rem 1rem; }
.table > thead > tr > th {
    background: var(--md-surface-low);
    color: var(--md-on-surface-variant);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--md-outline-variant);
}
.table > tbody > tr > td { border-bottom: 1px solid var(--md-outline-variant); vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-light { --bs-table-bg: var(--md-surface-low); --bs-table-color: var(--md-on-surface-variant); }
.table-bordered > :not(caption) > * > * { border-width: 1px; border-color: var(--md-outline-variant); }
.table td .btn { vertical-align: middle; }

/* ----- Badges ----- */
.badge {
    font-size: .75rem; font-weight: 500; letter-spacing: .01em;
    padding: .35em .75em; border-radius: var(--md-radius-sm); line-height: 1.2;
}
.badge.fs-6 { font-size: .8125rem !important; padding: .5em .9em; }
.badge.bg-primary { background-color: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; }
.badge.bg-secondary { background-color: var(--md-surface-container) !important; color: var(--md-on-surface-variant) !important; }
.badge.bg-success { background-color: var(--md-success-container) !important; color: var(--md-on-success-container) !important; }
.badge.bg-warning { background-color: var(--md-warning-container) !important; color: var(--md-on-warning-container) !important; }
.badge.bg-info { background-color: var(--md-info-container) !important; color: var(--md-on-info-container) !important; }
.badge.bg-danger { background-color: var(--md-error-container) !important; color: var(--md-on-error-container) !important; }
.badge.text-dark { color: inherit !important; }
.bg-primary.fs-6:not(.badge) { /* Meters page: count chip that lost its badge class */
    display: inline-block; background: var(--md-primary-container); color: var(--md-on-primary-container);
    padding: .5em .9em; border-radius: var(--md-radius-sm); font-size: .8125rem !important; font-weight: 500;
}

/* ----- Alerts / banners ----- */
.alert {
    border: 0; border-radius: var(--md-radius-md);
    padding: .875rem 1.125rem; font-size: .875rem; margin-bottom: 1rem;
}
.alert strong { font-weight: 500; }
.alert-danger { background: var(--md-error-container); color: var(--md-on-error-container); }
.alert-info { background: var(--md-info-container); color: var(--md-on-info-container); }
.alert-success { background: var(--md-success-container); color: var(--md-on-success-container); }
.alert-warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.alert.mb-0 { margin-bottom: 0; }

/* ----- Tabs (primary tabs) ----- */
.nav-tabs { border-bottom: 1px solid var(--md-outline-variant); gap: .25rem; }
.nav-tabs .nav-link {
    border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    margin-bottom: -1px; padding: .75rem 1.25rem;
    color: var(--md-on-surface-variant); font-weight: 500; font-size: .875rem;
    background: none; cursor: pointer;
    transition: color .15s var(--md-ease), background-color .15s var(--md-ease);
}
.nav-tabs .nav-link:hover { background: rgba(24, 95, 138, .06); color: var(--md-on-surface); }
.nav-tabs .nav-link.active { color: var(--md-primary); background: transparent; border-bottom-color: var(--md-primary); }
.nav-tabs .nav-link:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }

/* ----- Dialogs ----- */
.modal-backdrop.show { opacity: 1; background-color: rgba(10, 20, 28, .4); }
.modal-dialog { margin-top: 4rem; margin-bottom: 2rem; animation: md-dialog-in .2s var(--md-ease); }
.modal-content {
    border: 0; border-radius: var(--md-radius-xl);
    background: var(--md-surface); box-shadow: var(--md-elev-3);
}
.modal-header { border: 0; padding: 1.5rem 1.5rem .5rem 1.5rem; align-items: flex-start; }
.modal-title { font-size: 1.375rem; font-weight: 400; line-height: 1.75rem; }
.modal-body { padding: 1rem 1.5rem; }
.modal-footer { border: 0; padding: .75rem 1.5rem 1.5rem; gap: .5rem; }
.modal-footer > * { margin: 0; }
/* Cancel = text button, confirm stays filled */
.modal-footer .btn-secondary, .modal-footer .btn-outline-secondary {
    --bs-btn-bg: transparent; --bs-btn-hover-bg: rgba(24, 95, 138, .08); --bs-btn-active-bg: rgba(24, 95, 138, .14);
    --bs-btn-color: var(--md-primary); --bs-btn-hover-color: var(--md-primary); --bs-btn-active-color: var(--md-primary);
    --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent;
}
@keyframes md-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ----- Progress ----- */
.spinner-border { --bs-spinner-border-width: 3px; --bs-spinner-width: 2.25rem; --bs-spinner-height: 2.25rem; color: var(--md-primary); }
.spinner-border-sm { --bs-spinner-width: 1rem; --bs-spinner-height: 1rem; --bs-spinner-border-width: 2px; }
.btn-primary .spinner-border, .btn-success .spinner-border { color: currentColor; }

/* ----- Focus (keyboard) ----- */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* ----- Error boundary / Blazor error UI (snackbar) ----- */
.blazor-error-boundary {
    background: var(--md-error-container); color: var(--md-on-error-container);
    padding: 1rem 1.25rem; border-radius: var(--md-radius-md);
}
.blazor-error-boundary::after { content: "Something went wrong. Please refresh the page."; }
.darker-border-checkbox.form-check-input { border-color: var(--md-on-surface-variant); }

/* ----- Stat cards (dashboard) ----- */
.stat-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1.5rem; height: 100%;
    background: var(--md-surface); color: var(--md-on-surface);
    border: 1px solid var(--md-outline-variant); border-radius: var(--md-radius-md);
    text-decoration: none !important;
    transition: border-color .15s var(--md-ease), box-shadow .15s var(--md-ease), background-color .15s var(--md-ease);
}
a.stat-card:hover { border-color: var(--md-outline); box-shadow: var(--md-elev-1); color: var(--md-on-surface); }
a.stat-card:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.stat-icon {
    flex: none; width: 3rem; height: 3rem; border-radius: var(--md-radius-md);
    display: grid; place-items: center; font-size: 1.5rem;
    background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.stat-label { font-size: .8125rem; font-weight: 500; color: var(--md-on-surface-variant); letter-spacing: .01em; }
.stat-value { font-size: 2rem; line-height: 2.5rem; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat-chevron { margin-left: auto; color: var(--md-outline); font-size: 1.25rem; }

/* ----- Invoice sheet preview ----- */
.excel-preview { background: var(--md-surface-low); }
.excel-toolbar { background: var(--md-surface-container); border-bottom: 1px solid var(--md-outline-variant); }
.excel-label { background: var(--md-surface-low); }

/* ----- Icon glyphs (mask based, inherit currentColor; replaces Bootstrap Icons) ----- */
.bi, .mi {
    display: inline-block; width: 1.25em; height: 1.25em; flex: none;
    vertical-align: -.25em; background-color: currentColor;
    -webkit-mask: var(--mi) center / contain no-repeat; mask: var(--mi) center / contain no-repeat;
}
.bi::before { content: none !important; }


/* ===== Auth pages (login / account) ===== */
.auth-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--md-bg); }
.auth-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: 4rem; padding: 0 1.5rem; background: var(--md-surface); border-bottom: 1px solid var(--md-outline-variant);
}
.auth-bar-brand { display: flex; align-items: center; gap: .75rem; font-weight: 500; font-size: 1.0625rem; color: var(--md-on-surface); text-decoration: none; }
.auth-bar-brand:hover { text-decoration: none; color: var(--md-on-surface); }
.auth-bar-user { display: flex; align-items: center; gap: 1rem; }
.auth-bar-form { margin: 0; }
.auth-bar-link { font-weight: 500; font-size: .875rem; }
.auth-bar-name { color: var(--md-on-surface-variant); font-size: .8125rem; }
.auth-brand-mark {
    display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px;
    background: var(--md-primary); color: var(--md-on-primary); font-weight: 700; font-size: 1.125rem;
}

.auth-shell { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: clamp(1.5rem, 8vh, 5rem) 1rem 2rem; }
.auth-main { width: 100%; max-width: 27.5rem; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 1.5rem; }
.auth-brand-name { font-size: 1.25rem; font-weight: 500; letter-spacing: .005em; }

.auth-card {
    background: var(--md-surface); border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-lg); padding: 2rem; box-shadow: var(--md-elev-1);
}
.auth-title { font-size: 1.5rem; line-height: 2rem; font-weight: 500; margin: 0 0 .25rem; }
.auth-subtitle { color: var(--md-on-surface-variant); margin: 0 0 1.5rem; font-size: .875rem; }

.auth-alert.validation-summary-valid { display: none; }
.auth-alert.validation-summary-errors {
    background: var(--md-error-container); color: var(--md-on-error-container);
    border-radius: var(--md-radius-sm); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem;
}
.auth-alert ul { list-style: none; margin: 0; padding: 0; }

/* Outlined text field with floating label */
.m3-field { position: relative; margin-top: 1.25rem; }
.m3-field:first-of-type { margin-top: 0; }
.m3-input {
    display: block; width: 100%; height: 3.5rem; padding: 0 1rem;
    font: inherit; font-size: 1rem; color: var(--md-on-surface);
    background: var(--md-surface); border: 1px solid var(--md-outline); border-radius: var(--md-radius-sm);
    outline: none; transition: border-color .15s var(--md-ease), box-shadow .15s var(--md-ease);
}
.m3-input:hover:not(:focus) { border-color: var(--md-on-surface-variant); }
.m3-input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }
.m3-label {
    position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
    padding: 0 .25rem; margin: 0; max-width: calc(100% - 1.5rem);
    font-size: 1rem; color: var(--md-on-surface-variant); line-height: 1;
    pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: top .15s var(--md-ease), font-size .15s var(--md-ease), color .15s var(--md-ease);
}
.m3-input:focus ~ .m3-label,
.m3-input:not(:placeholder-shown) ~ .m3-label,
.m3-input:-webkit-autofill ~ .m3-label { top: 0; font-size: .75rem; background: var(--md-surface); }
.m3-input:focus ~ .m3-label { color: var(--md-primary); }
.m3-input.input-validation-error { border-color: var(--md-error); box-shadow: 0 0 0 1px var(--md-error); }
.m3-input.input-validation-error ~ .m3-label { color: var(--md-error); }
.m3-field-trailing .m3-input { padding-right: 3.25rem; }
.m3-trailing {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    width: 2.5rem; height: 2.5rem; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant);
    font-size: 1.375rem; cursor: pointer; transition: background-color .15s var(--md-ease);
}
.m3-trailing:hover { background: rgba(24, 38, 48, .08); }
.m3-trailing .mi-eye-off { display: none; }
.m3-trailing.is-visible .mi-eye { display: none; }
.m3-trailing.is-visible .mi-eye-off { display: inline-block; }
.m3-field + .field-validation-error { margin: .25rem 0 0 1rem; }

.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; }
.m3-check { display: inline-flex; align-items: center; gap: .625rem; margin: 0; cursor: pointer; font-size: .875rem; user-select: none; }
.m3-check .form-check-input { margin: 0; float: none; }
.auth-link { font-size: .875rem; font-weight: 500; }

.auth-submit { margin-top: .25rem; }
.auth-submit-busy { display: none; align-items: center; gap: .625rem; }
.auth-submit.is-loading .auth-submit-label { display: none; }
.auth-submit.is-loading .auth-submit-busy { display: inline-flex; }
.auth-submit.is-loading:disabled { background: var(--md-primary); border-color: var(--md-primary); color: #fff; opacity: .9; cursor: progress; }

.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--md-on-surface-variant); font-size: .75rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--md-outline-variant); }
.auth-external { display: grid; gap: .5rem; }
.auth-help {
    display: flex; flex-direction: column; gap: .25rem; align-items: center; text-align: center;
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface-variant); font-size: .8125rem;
}
.auth-qr { display: grid; place-items: center; padding: 1rem; margin: 1rem 0; background: var(--md-surface-low); border-radius: var(--md-radius-md); }
.auth-key code { font-size: .9375rem; word-break: break-all; color: var(--md-on-surface); }

.auth-footer {
    display: flex; justify-content: center; gap: 1rem; padding: 1rem;
    color: var(--md-on-surface-variant); font-size: .75rem;
}

@media (max-width: 575.98px) {
    .auth-shell { padding-top: 1.5rem; }
    .auth-card { padding: 1.5rem 1.25rem; border-radius: var(--md-radius-md); }
    .auth-bar { padding: 0 1rem; }
    .auth-bar-name { display: none; }
}

/* ===== ICONS-BEGIN (generated) ===== */
.bi-people-fill { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
.bi-credit-card-fill { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E"); }
.bi-file-earmark-text-fill { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
.bi-person-plus-fill { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); }
.bi-check-circle { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E"); }
.bi-file-earmark-excel { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
.bi-file-earmark-spreadsheet { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
.bi-house-door-fill { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E"); }
.icon-dashboard { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E"); }
.icon-customers { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
.icon-accounts { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E"); }
.icon-meters { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44zm-9.79 6.84a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z'/%3E%3C/svg%3E"); }
.icon-sub-accounts { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z'/%3E%3C/svg%3E"); }
.icon-transactions-list { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z'/%3E%3C/svg%3E"); }
.icon-Invoice { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
.icon-import { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/%3E%3C/svg%3E"); }
.icon-reports { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z'/%3E%3C/svg%3E"); }
.icon-user-links { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E"); }
.mi-menu { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E"); }
.mi-logout { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E"); }
.mi-expand { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E"); }
.mi-eye { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E"); }
.mi-eye-off { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E"); }
.mi-person { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); }
.mi-chev { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"); }
.mi-shield { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E"); }
/* ===== ICONS-END ===== */

/* Chips containing a close button (invoice e-mail recipients) */
.badge .btn-close, .btn-close-white { filter: none; width: 1.5rem; height: 1.5rem; background-size: .625rem; vertical-align: middle; }
.invoice-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
}

.invoice-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #6c757d;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .invoice-tab:hover {
        background: #f1f5f9;
        color: #2563eb;
    }

    .invoice-tab.active {
        background: #2563eb;
        color: white;
        border-color: #2563eb;
    }

@media (max-width: 576px) {
    .invoice-tabs {
        flex-direction: column;
    }

    .invoice-tab {
        width: 100%;
    }
}

.theme-toggle .theme-icon-dark {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .theme-icon-light {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .theme-icon-dark {
    display: inline-block;
}

.theme-toggle .mi {
    width: 1.375rem;
    height: 1.375rem;
}

.mi-moon {
    --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z'/%3E%3C/svg%3E");
}

.mi-sun {
    --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    --md-primary: #7fc0e8;
    --md-primary-hover: #9ccff0;
    --md-on-primary: #00263a;
    --md-primary-container: #0f3d57;
    --md-on-primary-container: #cfe8f7;
    --md-secondary-container: #26414f;
    --md-on-secondary-container: #d3e4ef;
    --md-bg: #0f171d;
    --md-surface: #172027;
    --md-surface-low: #1b252d;
    --md-surface-container: #223039;
    --md-outline: #55656f;
    --md-outline-variant: #2c3a43;
    --md-on-surface: #e2eaef;
    --md-on-surface-variant: #a5b4bd;
    --md-error: #ffb4ab;
    --md-error-container: #5c1a15;
    --md-on-error-container: #ffdad6;
    --md-success: #7fd1a0;
    --md-success-container: #12432a;
    --md-on-success-container: #c6f0d6;
    --md-warning-container: #4d3a0a;
    --md-on-warning-container: #ffe3a1;
    --md-info-container: #0f3d57;
    --md-on-info-container: #cfe8f7;
    --bs-primary-rgb: 127, 192, 232;
    --bs-body-color-rgb: 226, 234, 239;
    --bs-emphasis-color: #fff;
    --bs-tertiary-bg: var(--md-surface-container);
}

    [data-bs-theme="dark"] .btn-primary,
    [data-bs-theme="dark"] .btn-primary:hover {
        --bs-btn-color: #00263a;
        --bs-btn-hover-color: #00263a;
    }

    [data-bs-theme="dark"] .btn-secondary:hover {
        --bs-btn-hover-bg: #31505f;
    }

    [data-bs-theme="dark"] .btn:disabled,
    [data-bs-theme="dark"] .btn.disabled {
        background-color: rgba(255,255,255,.08);
        color: rgba(255,255,255,.35);
    }

    [data-bs-theme="dark"] .form-control::placeholder {
        color: #7d8d98;
    }

    [data-bs-theme="dark"] .form-control:disabled,
    [data-bs-theme="dark"] .form-select:disabled {
        color: rgba(255,255,255,.5);
    }

    [data-bs-theme="dark"] .btn-close {
        filter: invert(1) grayscale(1);
    }

    /* invoice tabs */
    [data-bs-theme="dark"] .invoice-tabs {
        border-bottom-color: var(--md-outline-variant);
    }

    [data-bs-theme="dark"] .invoice-tab {
        color: var(--md-on-surface-variant);
    }

        [data-bs-theme="dark"] .invoice-tab:hover {
            background: var(--md-surface-container);
            color: var(--md-primary);
        }

        [data-bs-theme="dark"] .invoice-tab.active {
            background: var(--md-primary);
            color: var(--md-on-primary);
            border-color: var(--md-primary);
        }

    /* Invoices page hard-coded colours */
    [data-bs-theme="dark"] .invoice-page {
        --invoice-border: var(--md-outline-variant);
        --invoice-muted: var(--md-on-surface-variant);
        --invoice-ink: var(--md-on-surface);
        --invoice-accent: var(--md-primary);
    }

    [data-bs-theme="dark"] .invoice-card,
    [data-bs-theme="dark"] .invoice-card-header,
    [data-bs-theme="dark"] .bulk-email-list,
    [data-bs-theme="dark"] .outlook-note-editor {
        background: var(--md-surface);
    }

    [data-bs-theme="dark"] .outlook-composer-header,
    [data-bs-theme="dark"] .outlook-message-header {
        background: var(--md-surface-low);
    }

    [data-bs-theme="dark"] .outlook-mail-toolbar,
    [data-bs-theme="dark"] .invoice-actions-panel,
    [data-bs-theme="dark"] .outlook-send-toolbar,
    [data-bs-theme="dark"] .outlook-attachment-chip,
    [data-bs-theme="dark"] .bulk-result-stats > div {
        background: var(--md-surface-low);
        border-color: var(--md-outline-variant);
    }

    [data-bs-theme="dark"] .outlook-composer,
    [data-bs-theme="dark"] .outlook-message-card {
        border-color: var(--md-outline-variant);
    }

    [data-bs-theme="dark"] .outlook-recipient-row {
        border-bottom-color: var(--md-outline-variant);
    }

    [data-bs-theme="dark"] .outlook-compose-label,
    [data-bs-theme="dark"] .outlook-attachment-chip {
        color: var(--md-primary);
    }

    [data-bs-theme="dark"] .outlook-subject-value,
    [data-bs-theme="dark"] .outlook-message-editor,
    [data-bs-theme="dark"] .invoice-page .form-label,
    [data-bs-theme="dark"] .invoice-subsection-label {
        color: var(--md-on-surface);
    }

    [data-bs-theme="dark"] .invoice-page .form-control,
    [data-bs-theme="dark"] .invoice-page .form-select {
        border-color: var(--md-outline);
    }

    [data-bs-theme="dark"] .excel-table,
    [data-bs-theme="dark"] .excel-input:hover,
    [data-bs-theme="dark"] .excel-input:focus {
        background: var(--md-surface);
    }

/* ===== Dark mode: layout shell (top bar, drawer, menus, footer) ===== */
html[data-bs-theme="dark"] .app-bar,
html[data-bs-theme="dark"] .app-footer,
html[data-bs-theme="dark"] .drawer,
html[data-bs-theme="dark"] .drawer-header,
html[data-bs-theme="dark"] .drawer-footer {
    background: var(--md-surface) !important;
    color: var(--md-on-surface) !important;
    border-color: var(--md-outline-variant) !important;
}

    html[data-bs-theme="dark"] .app-bar-title,
    html[data-bs-theme="dark"] .brand,
    html[data-bs-theme="dark"] .brand-name,
    html[data-bs-theme="dark"] .user-chip,
    html[data-bs-theme="dark"] .user-chip-name,
    html[data-bs-theme="dark"] .icon-btn,
    html[data-bs-theme="dark"] .drawer-link,
    html[data-bs-theme="dark"] .drawer .nav-link,
    html[data-bs-theme="dark"] .app-footer span {
        color: var(--md-on-surface) !important;
    }

html[data-bs-theme="dark"] .user-chip-role,
html[data-bs-theme="dark"] .app-footer-note,
html[data-bs-theme="dark"] .user-menu-role,
html[data-bs-theme="dark"] .user-chip-caret {
    color: var(--md-on-surface-variant) !important;
}

html[data-bs-theme="dark"] .icon-btn:hover,
html[data-bs-theme="dark"] .user-chip:hover,
html[data-bs-theme="dark"] .drawer-link:hover,
html[data-bs-theme="dark"] .drawer .nav-link:hover {
    background: var(--md-surface-container) !important;
}

html[data-bs-theme="dark"] .drawer-link.active,
html[data-bs-theme="dark"] .drawer .nav-link.active,
html[data-bs-theme="dark"] .drawer a.active {
    background: var(--md-primary-container) !important;
    color: var(--md-on-primary-container) !important;
}

html[data-bs-theme="dark"] .avatar {
    background: var(--md-primary-container) !important;
    color: var(--md-on-primary-container) !important;
}

/* account dropdown */
html[data-bs-theme="dark"] .user-menu-panel {
    background: var(--md-surface-container) !important;
    color: var(--md-on-surface) !important;
    border-color: var(--md-outline-variant) !important;
}

html[data-bs-theme="dark"] .user-menu-name,
html[data-bs-theme="dark"] .user-menu-item {
    color: var(--md-on-surface)