/*
 * Modus IT Hosting Portal — Architectural Design Language (theme 1.3.0)
 * Implements input_data/modus_it_design_language.md on top of Bootstrap 5 / Huraga.
 * Loaded after mc-overrides.css and before mc-dark.css. Extends, never forks, Bootstrap.
 *
 * §1 Touch protocol  §2 Bootstrap blind spots  §3 Fluid grid  §4 Density
 * §5 Typography      §6 Elevation              §7 Destructive friction
 */

:root {
    /* §1 — 48x48 touch baseline */
    --mc-touch: 3rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 1rem;
    --bs-body-font-size: 1rem;
    --bs-form-control-padding-y: 0.75rem;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.5rem;
    --mc-radius-sm: 0.5rem;
    --mc-radius-md: 0.5rem;
    --mc-radius-lg: 0.75rem;

    /* §5 — fluid type + families */
    --bs-h1-font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --bs-h2-font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-font-monospace: 'JetBrains Mono', 'Fira Code', monospace;
    --mc-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* §6 — elevation layers */
    --mc-elev-1: 0 .125rem .25rem rgba(15, 23, 42, .075);
    --mc-elev-2: 0 .5rem 1rem rgba(15, 23, 42, .15);
}

/* ---------- §1 Touch targets ---------- */
.btn,
.btn-sm,
.btn-lg,
.form-control,
.form-select,
.input-group-text,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.dropdown-item,
.list-group-item-action,
.page-link,
.navbar-toggler,
.navbar-nav .nav-link,
.accordion-button,
.mc-mobile-account-link,
.mc-theme-toggle {
    min-height: var(--mc-touch);
}

.btn,
.btn-sm {
    padding-block: var(--bs-btn-padding-y);
    font-size: var(--bs-btn-font-size);
    min-width: var(--mc-touch);
}

.form-control,
.form-select,
.input-group-text {
    padding-block: var(--bs-form-control-padding-y);
    font-size: 1rem; /* also stops iOS focus-zoom */
}

textarea.form-control { min-height: 6rem; }

.navbar-toggler,
.mc-mobile-account-link,
.mc-theme-toggle {
    min-width: var(--mc-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-tabs .nav-link,
.nav-pills .nav-link,
.navbar-nav .nav-link,
.dropdown-item {
    display: flex;
    align-items: center;
    padding-block: .75rem;
}

.list-group-item-action,
.page-link {
    display: flex;
    align-items: center;
}

.btn-sm { padding-inline: 1rem; }

/* Floating "Top" button is a tap target too */
.position-fixed.btn { min-height: var(--mc-touch); }

/* ---------- §2A Checkboxes / radios ---------- */
.form-check { min-height: var(--mc-touch); display: flex; align-items: center; gap: .5rem; padding-left: 0; }
.form-check .form-check-input { float: none; margin-left: 0; }
.form-check-input {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .1rem;
}
.form-check-label {
    padding: .25rem 0 .25rem .5rem;
    cursor: pointer;
}
.form-switch .form-check-input { width: 3rem; height: 1.5rem; }

/* ---------- §2B Close buttons (invisible padded hit-area) ---------- */
.btn-close {
    padding: 1rem;
    margin: -.5rem;
    min-height: 0;
    min-width: 0;
    box-sizing: content-box;
    width: 1rem;
    height: 1rem;
}

/* ---------- §2C Icon groups never sit flush ---------- */
.btn-group:not(.dropdown) > .btn + .btn { margin-left: .5rem; }
.btn-group.mc-btn-group--gap { gap: 1rem; }
.mc-icon-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mc-icon-actions .btn,
.btn-icon { padding: .75rem; }
td .btn + .btn, .card-footer .btn + .btn { margin-left: .5rem; }

/* ---------- §2D Inline links in paragraphs ---------- */
p:has(a + a),
p:has(a ~ a),
li:has(a ~ a),
.mc-link-text { line-height: 1.9; }
.lh-lg { line-height: 2 !important; }
:where(p a:not(.btn), li a:not(.btn, .nav-link, .dropdown-item, .list-group-item-action)) {
    display: inline-block;
    padding-block: .125rem;
}

/* ---------- §5 Typography ---------- */
h1, .h1 { font-size: var(--bs-h1-font-size); }
h2, .h2 { font-size: var(--bs-h2-font-size); }
body { font-family: var(--bs-body-font-family); }
code, kbd, pre, samp,
.font-monospace,
.mc-technical-data,
.ip-address, .mc-mono {
    font-family: var(--bs-font-monospace);
}

/* ---------- §6 Elevation ---------- */
.card { box-shadow: var(--mc-elev-1); border-radius: var(--mc-radius-md); }
.sticky-top, .mc-header--sticky, .fixed-bottom, .mc-bottom-bar { box-shadow: var(--mc-elev-2); }
.modal-content { border-radius: var(--mc-radius-lg); }

/* ---------- §3 Compact window class: no horizontal bleed ----------
   The portal container has no side padding under 768px, so a bare .row's
   negative gutter margins push the page 12px wider than the viewport. */
@media (max-width: 767.98px) {
    body.mc-portal-body .content-block > .row,
    body.mc-portal-body section > .row,
    body.mc-portal-body .mc-portal-main-column > .row {
        margin-inline: 0;
    }
}

/* ---------- §3/§4 Bottom tab bar + bottom sheet (compact windows) ---------- */
.min-w-0 { min-width: 0; }

.mc-bottom-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--mc-surface-raised);
    border-top: 1px solid var(--mc-border-subtle);
    box-shadow: 0 -.5rem 1rem rgba(15, 23, 42, .08); /* layer 2 */
}

.mc-bottom-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    min-height: 3.5rem; /* >= 48px, with room for the label */
    padding: .375rem .25rem;
    border: 0;
    background: transparent;
    color: var(--mc-text-secondary);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
}

.mc-bottom-bar__item .icon { width: 1.5rem; height: 1.5rem; }
.mc-bottom-bar__item.is-active { color: var(--mc-color-primary-700); }
.mc-bottom-bar__item.is-active .icon { stroke-width: 2.25; }
.mc-bottom-bar__item:hover { color: var(--mc-color-primary-700); }

@media (max-width: 767.98px) {
    /* room so the tab bar never covers the last row of content, and the footer clears it */
    body.mc-portal-body { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0)); }
    /* the tab bar's "More" sheet replaces the header hamburger for signed-in clients */
    body.mc-portal-body .mc-header--portal .navbar-toggler { display: none; }
    body.mc-portal-body .position-fixed.btn.bottom-0 { bottom: 4.5rem !important; }
}

.mc-more-sheet {
    z-index: 1045;
    max-height: 85vh;
    border-radius: 1rem 1rem 0 0;
    box-shadow: var(--mc-elev-2);
}
.mc-more-sheet.offcanvas-bottom { height: auto; }
.mc-more-sheet .offcanvas-header { padding: 1rem 1rem .5rem; align-items: center; }
.mc-more-sheet .offcanvas-body { padding: .5rem 1rem 1.5rem; }
body.mc-sheet-open { overflow: hidden; }

.mc-sheet-balance {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin-bottom: .75rem; padding: .75rem 1rem;
    background: var(--mc-surface-subtle); border-radius: var(--mc-radius-md);
}

.mc-sheet-list a {
    display: flex; align-items: center; gap: .75rem;
    min-height: var(--mc-touch); padding: .75rem .5rem;
    color: var(--mc-text-primary); font-weight: 600; text-decoration: none;
    border-bottom: 1px solid var(--mc-border-subtle);
}
.mc-sheet-list li:last-child a { border-bottom: 0; }
.mc-sheet-list a.mc-sheet-signout { color: var(--mc-color-danger); }
.mc-sheet-list .icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
[data-bs-theme="dark"] .mc-bottom-bar,
[data-bs-theme="dark"] .mc-more-sheet { background: var(--mc-surface-dark-raised); border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .mc-bottom-bar__item { color: #94a3b8; }
[data-bs-theme="dark"] .mc-bottom-bar__item.is-active { color: #7dd3fc; }
[data-bs-theme="dark"] .mc-sheet-list a { color: #f1f5f9; border-color: rgba(255,255,255,.12); }

/* §7 modal polish: destructive confirmation */
.mc-confirm-modal .modal-content { border-width: 2px; box-shadow: var(--mc-elev-2); }
.mc-confirm-modal .modal-footer { gap: .75rem; flex-wrap: wrap; }
.mc-confirm-modal .modal-footer .btn { flex: 1 1 8rem; }

/* ---------- §4 Progressive density: dashboard stat lists ---------- */
.mc-dashboard dl.row,
.mc-dashboard .card-body > .row:has(> dt) {
    --bs-gutter-x: 0;
}
@media (max-width: 767.98px) {
    /* label left / value right instead of a stacked label over value: half the scrolling */
    .mc-dashboard .card-body > .row:has(> dt) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1rem;
        row-gap: 0;
        margin-inline: 0;
    }
    .mc-dashboard .card-body > .row:has(> dt) > dt,
    .mc-dashboard .card-body > .row:has(> dt) > dd {
        width: auto;
        max-width: none;
        flex: none;
        margin: 0;
        padding: .625rem 0;
        border-bottom: 1px solid var(--mc-border-subtle);
        align-self: center;
        overflow-wrap: anywhere;
    }
    .mc-dashboard .card-body > .row:has(> dt) > dt { grid-column: 1; }
    .mc-dashboard .card-body > .row:has(> dt) > dd { grid-column: 2; text-align: right; font-weight: 600; }
    .mc-dashboard .card-body > .row:has(> dt) > .col-12 { grid-column: 1 / -1; }
}

/* Dashboard card headers: title and actions wrap instead of colliding in narrow columns */
.mc-dashboard .card .card-header {
    flex-wrap: wrap;
    gap: .75rem;
}
.mc-dashboard .card .card-header h6 { flex: 1 1 auto; min-width: 6rem; }
.mc-dashboard .card .card-header > div,
.mc-dashboard .card .card-header > .btn-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.mc-dashboard .card { height: calc(100% - 1.5rem); } /* equal-height cards within a row, honouring mb-4 */

/* Cookie notice sits above the tab bar on compact windows and keeps a 48px dismiss target */
#cookie-consent-block .alert { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: var(--mc-radius-md); box-shadow: var(--mc-elev-2); }
#cookie-consent-block .btn-close { flex: 0 0 auto; }
@media (max-width: 767.98px) {
    body.mc-portal-body #cookie-consent-block { bottom: calc(3.5rem + env(safe-area-inset-bottom, 0)) !important; z-index: 1031; }
}

/* Sidebar navigation rows: full-width 48px targets */
.mc-sidebar .nav-link,
.mc-sidebar .list-group-item {
    display: flex;
    align-items: center;
    min-height: var(--mc-touch);
}

/* ---------- Primary action: one brand blue everywhere (WCAG AA: 5.9:1 with white text) ---------- */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--mc-color-primary-700);
    --bs-primary-rgb: 3, 105, 161;
    --bs-link-color: var(--mc-color-primary-700);
    --bs-link-color-rgb: 3, 105, 161;
    --bs-link-hover-color: var(--mc-color-primary-900);
    --bs-link-hover-color-rgb: 12, 74, 110;
}
.btn-primary,
.mc-dashboard .btn-primary,
.btn.mc-button--primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mc-color-primary-700);
    --bs-btn-border-color: var(--mc-color-primary-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mc-color-primary-800);
    --bs-btn-hover-border-color: var(--mc-color-primary-800);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mc-color-primary-900);
    --bs-btn-active-border-color: var(--mc-color-primary-900);
    --bs-btn-focus-shadow-rgb: 56, 189, 248;
    --bs-btn-disabled-bg: var(--mc-color-primary-700);
    --bs-btn-disabled-border-color: var(--mc-color-primary-700);
    background: var(--mc-color-primary-700);
    border-color: var(--mc-color-primary-700);
    color: #fff;
    box-shadow: var(--mc-elev-1);
}
.btn-primary:hover, .btn-primary:focus-visible,
.mc-dashboard .btn-primary:hover, .btn.mc-button--primary:hover {
    background: var(--mc-color-primary-800);
    border-color: var(--mc-color-primary-800);
    color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--mc-color-primary-700);
    --bs-btn-border-color: var(--mc-color-primary-700);
    --bs-btn-hover-bg: var(--mc-color-primary-700);
    --bs-btn-hover-border-color: var(--mc-color-primary-700);
    --bs-btn-hover-color: #fff;
    color: var(--mc-color-primary-700);
    border-color: var(--mc-color-primary-700);
}
.btn-outline-primary:hover, .btn-outline-primary:focus-visible {
    background: var(--mc-color-primary-700);
    border-color: var(--mc-color-primary-700);
    color: #fff;
}

/* =====================================================================
   Page-level refinements (design language applied workflow by workflow)
   ===================================================================== */

/* ---------- Secondary / info / destructive button voice ---------- */
.btn-info,
.btn-outline-info {
    --bs-btn-color: var(--mc-color-primary-900);
    --bs-btn-bg: var(--mc-color-primary-100);
    --bs-btn-border-color: var(--mc-color-primary-200);
    --bs-btn-hover-color: var(--mc-color-primary-900);
    --bs-btn-hover-bg: var(--mc-color-primary-200);
    --bs-btn-hover-border-color: var(--mc-color-primary-300);
    --bs-btn-active-bg: var(--mc-color-primary-200);
    --bs-btn-active-border-color: var(--mc-color-primary-300);
    background: var(--mc-color-primary-100);
    border-color: var(--mc-color-primary-200);
    color: var(--mc-color-primary-900);
    box-shadow: none;
}
.btn-secondary {
    --bs-btn-bg: var(--mc-color-ink-700);
    --bs-btn-border-color: var(--mc-color-ink-700);
    --bs-btn-hover-bg: var(--mc-color-ink-800);
    --bs-btn-hover-border-color: var(--mc-color-ink-800);
    background: var(--mc-color-ink-700);
    border-color: var(--mc-color-ink-700);
}
.btn-outline-secondary {
    --bs-btn-color: var(--mc-color-ink-700);
    --bs-btn-border-color: var(--mc-border-strong);
    --bs-btn-hover-bg: var(--mc-color-ink-100);
    --bs-btn-hover-color: var(--mc-color-ink-900);
    --bs-btn-hover-border-color: var(--mc-color-ink-400);
    color: var(--mc-color-ink-700);
    border-color: var(--mc-border-strong);
}
.btn-outline-secondary:hover { background: var(--mc-color-ink-100); color: var(--mc-color-ink-900); }

/* §7: a destructive trigger is quiet until engaged — the loud red lives inside the confirmation modal */
.btn-danger[data-bs-toggle="modal"],
.btn-danger#request-cancel {
    background: transparent;
    color: var(--mc-color-danger);
    border-color: var(--mc-color-danger-dot);
    box-shadow: none;
}
.btn-danger[data-bs-toggle="modal"]:hover,
.btn-danger#request-cancel:hover {
    background: var(--mc-color-danger);
    border-color: var(--mc-color-danger);
    color: #fff;
}
/* "PDF" is a download, not a destructive action, despite the legacy btn-danger class */
a.btn-danger[href*="invoice/pdf"] {
    background: var(--mc-surface-raised);
    color: var(--mc-color-ink-800);
    border-color: var(--mc-border-strong);
    box-shadow: none;
}
a.btn-danger[href*="invoice/pdf"]:hover { background: var(--mc-color-ink-100); color: var(--mc-color-ink-900); }

/* ---------- Service details: technical values in monospace (§5) ---------- */
.tab-pane#details > table.table tr:nth-child(-n+4) td:last-child,
.mc-technical-value {
    font-family: var(--bs-font-monospace);
    font-size: .9375rem;
    overflow-wrap: anywhere;
}

/* ---------- Card footers that carry actions ---------- */
.card-footer .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
    .card-footer { display: grid; grid-template-columns: 1fr; gap: .75rem; }
    .card-footer .btn { width: 100%; margin: 0 !important; }
    .content-block form button[type="submit"].btn-primary:not(.btn-sm),
    .content-block form input[type="submit"].btn-primary:not(.btn-sm) { width: 100%; }
    .input-group button[type="submit"].btn-primary { width: auto; }
}

/* ---------- Tab strips scroll instead of clipping; active tab stays in view ---------- */
.nav-tabs, .nav-pills.mc-scroll-x {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { white-space: nowrap; flex: 0 0 auto; }

/* ---------- Profile ---------- */
body.client-profile img.rounded, body.client-profile .avatar, body.client-profile [class*="avatar"] img,
body.client-profile .tab-pane img[alt*="vatar"] { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.iti__selected-country { min-height: var(--mc-touch); }

/* ---------- CKEditor (ticket replies): 48px toolbar controls ---------- */
.ck.ck-editor { --ck-ui-component-min-height: var(--mc-touch); }
.ck.ck-toolbar .ck-button,
.ck.ck-toolbar .ck-dropdown__button { min-height: var(--mc-touch); min-width: var(--mc-touch); }
.ck.ck-toolbar .ck-button.ck-button_with-text { min-width: 0; padding-inline: .75rem; }
.ck.ck-editor__editable { min-height: 9rem; font-size: 1rem; }

/* ---------- Order: domain configuration stacks on compact windows ---------- */
.nav-pills.flex-column .nav-link { min-height: var(--mc-touch); display: flex; align-items: center; }
@media (max-width: 767.98px) {
    .d-flex.mb-3:has(> .nav.nav-pills.flex-column) { flex-direction: column; }
    .d-flex.mb-3 > .nav.nav-pills.flex-column {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        border-inline-end: 0 !important;
        border-bottom: 1px solid var(--mc-border-subtle);
        margin: 0 0 1rem !important;
        padding-bottom: .5rem;
        gap: .5rem !important;
    }
    .d-flex.mb-3 > .nav.nav-pills.flex-column .nav-link { margin: 0 !important; white-space: nowrap; font-size: 1rem !important; padding-inline: 1rem !important; }
    .d-flex.mb-3 > .tab-content .input-group { max-width: none !important; }
    .d-flex.mb-3 > .tab-content .d-flex.gap-2 { flex-direction: column; }
    .d-flex.mb-3 > .tab-content .d-flex.gap-2 > .btn { width: 100%; }
    .d-flex.mb-3 > .tab-content .input-group .form-select { width: auto !important; max-width: 7rem !important; }
}

/* Bottom sheet list: full-width rows */
.mc-sheet-list { display: block; width: 100%; padding: 0; }
.mc-sheet-list li { display: block; width: 100%; }
.mc-sheet-list a { width: 100%; }

.btn-light { border-color: var(--mc-border-subtle); }

/* Two-column key/value tables (service details): quiet label, strong value */
table:not(:has(th)) > tbody > tr > td:first-child:nth-last-child(2) {
    width: 36%;
    color: var(--mc-text-secondary);
    font-weight: 600;
}
@media (max-width: 575.98px) {
    table:not(:has(th)) > tbody > tr > td:first-child:nth-last-child(2) { width: 42%; }
}

/* ---------- §3 Wide tables -> stacked cards on compact windows (see mc-ui.js) ---------- */
@media (max-width: 767.98px) {
    table[data-mc-stack="on"],
    table[data-mc-stack="on"] > tbody,
    table[data-mc-stack="on"] > tbody > tr,
    table[data-mc-stack="on"] > tbody > tr > td { display: block; width: 100%; }
    table[data-mc-stack="on"] > thead {
        display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    table[data-mc-stack="on"] { border: 0; background: transparent; }
    table[data-mc-stack="on"] > tbody > tr {
        margin-bottom: .75rem;
        padding: .25rem 1rem;
        background: var(--mc-surface-raised);
        border: 1px solid var(--mc-border-subtle);
        border-radius: var(--mc-radius-md);
        box-shadow: var(--mc-elev-1);
    }
    table[data-mc-stack="on"] > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .625rem 0;
        border: 0;
        border-bottom: 1px solid var(--mc-border-subtle);
        background: transparent !important;
        text-align: end;
        overflow-wrap: anywhere;
    }
    table[data-mc-stack="on"] > tbody > tr > td:last-child { border-bottom: 0; }
    table[data-mc-stack="on"] > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--mc-text-secondary);
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        text-align: start;
    }
    table[data-mc-stack="on"] > tbody > tr > td.actions,
    table[data-mc-stack="on"] > tbody > tr > td:last-child:has(.btn) { flex-wrap: wrap; justify-content: flex-end; }
    table[data-mc-stack="on"] > tbody > tr > td .btn { flex: 1 1 auto; }
    .table-responsive:has(> table[data-mc-stack="on"]) { overflow: visible; border: 0; }
}
@media (max-width: 767.98px) {
    table[data-mc-stack="on"] > tbody > tr > td { box-shadow: none !important; --bs-table-bg-type: transparent; --bs-table-accent-bg: transparent; }
}
@media (max-width: 767.98px) {
    .card-body.table-responsive:has(> table[data-mc-stack="on"]) { margin-inline: 0 !important; padding: .75rem; }
}

/* ---------- Card headers with actions/search: wrap and let the control take a full row on phones ---------- */
@media (max-width: 575.98px) {
    body.mc-portal-body .card-header.d-flex,
    body.mc-portal-body .card-header > .d-flex { flex-wrap: wrap; gap: .75rem; }
    body.mc-portal-body .card-header form,
    body.mc-portal-body .card-header .input-group { flex: 1 1 100%; width: 100%; max-width: none; }
    body.client-balance table td[colspan], body.invoice-index table td[colspan] { background: transparent !important; box-shadow: none !important; }
}

/* Dark mode: links and primary text on dark surfaces must stay >= 4.5:1 */
[data-bs-theme="dark"] {
    --bs-link-color: #7dd3fc;
    --bs-link-color-rgb: 125, 211, 252;
    --bs-link-hover-color: #bae6fd;
    --bs-link-hover-color-rgb: 186, 230, 253;
}
[data-bs-theme="dark"] .btn-outline-primary { color: #7dd3fc; border-color: #38bdf8; }
[data-bs-theme="dark"] .btn-outline-primary:hover { color: #0f172a; background: #7dd3fc; border-color: #7dd3fc; }
[data-bs-theme="dark"] .btn-danger[data-bs-toggle="modal"], [data-bs-theme="dark"] .btn-danger#request-cancel { color: #fca5a5; border-color: #f87171; background: transparent; }
[data-bs-theme="dark"] .mc-sheet-list a.mc-sheet-signout { color: #fca5a5; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-pills .nav-link.active:not(.btn) { color: #7dd3fc; }

/* ---------- Dashboard accent lines (kept): one colour per card family, in light AND dark ----------
   Profile/Services = brand sky, Invoices = amber, Support tickets = green. The dark-mode card rule
   in mc-dark.css resets border colours with higher specificity, so the accent is restated here. */
[data-bs-theme] .mc-dashboard .card.mc-dashboard-card                     { --mc-accent: var(--mc-color-primary-500); border-top: 3px solid var(--mc-accent); }
[data-bs-theme] .mc-dashboard .card.mc-dashboard-card--billing            { --mc-accent: #d39b00; }
[data-bs-theme] .mc-dashboard .card.mc-dashboard-card--support            { --mc-accent: #16845b; }
[data-bs-theme="dark"] .mc-dashboard .card.mc-dashboard-card              { --mc-accent: #38bdf8; }
[data-bs-theme="dark"] .mc-dashboard .card.mc-dashboard-card--billing     { --mc-accent: #f5b82e; }
[data-bs-theme="dark"] .mc-dashboard .card.mc-dashboard-card--support     { --mc-accent: #34d399; }