/* ==========================================================================
   TEMPORARY demo-mode stylesheet — served straight from /public, so it is
   NOT processed by Encore and needs NO `yarn encore dev` to take effect:
   just edit this file and refresh the browser.

   Linked from templates/base.html.twig as <link href="/demo-mode.css?v=...">.
   When the demo look is finalised, fold this back into assets/css/app.css
   (its .demo-mode block was moved out to here) and remove the <link>.
   ========================================================================== */

/* ==========================================================================
   Demo mode color scheme — minimal everest.green look
   A pared-down, 5-colour reinterpretation of the everest.green website
   design language. Light surfaces, lime accent, dark ink for text/contrast,
   and the website's signature "invert on hover" (lime fill <-> dark fill).
   Applied ONLY when the user has isDemoMode enabled (the `demo-mode` class is
   added to .app-container in base.html.twig); standard look is untouched.

   Palette (only these 5 colours are used):
     --demo-bg         #F3F8F0  light surface (sidebar, cards, chips bg)
     --demo-accent     #EFFFAE  lime accent (fills, active, highlights)
     --demo-ink        #373737  text, borders, inverted hover fill
     --demo-ink-strong #000000  strongest contrast (headings, icons)
     --demo-muted      #AAAEA7  subtle borders, dividers, muted text
   On lime (#EFFFAE) the text is ALWAYS dark (#373737) — white is illegible.
   ========================================================================== */
.demo-mode {
    --demo-bg: #F3F8F0;
    --demo-accent: #EFFFAE;
    --demo-ink: #373737;
    --demo-ink-strong: #000000;
    --demo-muted: #AAAEA7;
}

/* Header accent stripe: solid lime instead of the E.ON gradient */
.demo-mode .app-header:after {
    background: var(--demo-accent) !important;
}

/* Page title icon (originally $red) -> dark ink */
.demo-mode .app-page-title .page-title-icon i:before {
    color: var(--demo-ink) !important;
}

/* ---- Sidebar: light surface, dark ink, lime active item ------------- */
/* The sidebar ships with a .bg-dark class; make this win over the generic
   .demo-mode .bg-dark rule by matching that same class here. */
.demo-mode .app-sidebar,
.demo-mode .app-sidebar.bg-dark {
    background-color: var(--demo-bg) !important;
    background-image: none !important;
    border-right: 1px solid var(--demo-muted);
}

/* Default nav items: dark ink text/icon on the light sidebar */
.demo-mode .app-sidebar .vertical-nav-menu li a,
.demo-mode .app-sidebar .vertical-nav-menu li a i,
.demo-mode .app-sidebar .app-sidebar__heading {
    color: var(--demo-ink) !important;
}

/* Hover: faint dark veil, like the website's hover:bg-secondary/5 */
.demo-mode .app-sidebar .vertical-nav-menu li a:hover {
    background-color: rgba(55, 55, 55, 0.06) !important;
    color: var(--demo-ink) !important;
}

/* Active item: lime fill with dark ink label */
.demo-mode .app-sidebar .vertical-nav-menu li a.mm-active,
.demo-mode .app-sidebar .vertical-nav-menu li a.active {
    background-color: var(--demo-accent) !important;
    color: var(--demo-ink) !important;
}

.demo-mode .app-sidebar .vertical-nav-menu li a.mm-active i,
.demo-mode .app-sidebar .vertical-nav-menu li a.active i {
    color: var(--demo-ink) !important;
}

/* ====================================================================== */
/* Eight contextual button variants, each visually distinct, built only    */
/* from the 5 allowed colours. 4 solid/fill + 4 outline, balanced.         */
/* Every variant pins the label colour on .btn-X AND the .text-white       */
/* override so the Bootstrap text-white never wins. The icon <i> is NEVER   */
/* styled here — its background stays transparent and colour inherits from  */
/* the button, enforced once by the global <i> reset at the end of file.    */
/* Hover mirrors the rest state (fill<->invert, outline fills w/ border).   */
/* ---------------------------------------------------------------------- */

/* (1) primary — FILL lime: lime bg / ink label -> hover ink bg / lime */
.demo-mode .btn-primary,
.demo-mode .btn-primary.text-white {
    background-color: var(--demo-accent) !important;
    border: 2px solid var(--demo-accent) !important;
    color: var(--demo-ink) !important;
    box-shadow: none !important;
}
.demo-mode .btn-primary:hover,
.demo-mode .btn-primary:focus,
.demo-mode .btn-primary:active,
.demo-mode .btn-primary.active,
.demo-mode .btn-primary.text-white:hover,
.demo-mode .btn-primary.text-white:focus {
    background-color: var(--demo-ink) !important;
    border-color: var(--demo-ink) !important;
    color: var(--demo-accent) !important;
}

/* (2) success — SOLID ink: ink bg / lime label -> hover lime bg / ink */
.demo-mode .btn-success,
.demo-mode .btn-success.text-white {
    background-color: var(--demo-ink) !important;
    border: 2px solid var(--demo-ink) !important;
    color: var(--demo-accent) !important;
    box-shadow: none !important;
}
.demo-mode .btn-success:hover,
.demo-mode .btn-success:focus,
.demo-mode .btn-success:active,
.demo-mode .btn-success.active,
.demo-mode .btn-success.text-white:hover,
.demo-mode .btn-success.text-white:focus {
    background-color: var(--demo-accent) !important;
    border-color: var(--demo-muted) !important;
    color: var(--demo-ink) !important;
}

/* (3) danger — SOLID black: black bg / lime label -> hover lime bg / black */
.demo-mode .btn-danger,
.demo-mode .btn-danger.text-white {
    background-color: var(--demo-ink-strong) !important;
    border: 2px solid var(--demo-ink-strong) !important;
    color: var(--demo-accent) !important;
    box-shadow: none !important;
}
.demo-mode .btn-danger:hover,
.demo-mode .btn-danger:focus,
.demo-mode .btn-danger:active,
.demo-mode .btn-danger.active,
.demo-mode .btn-danger.text-white:hover,
.demo-mode .btn-danger.text-white:focus {
    background-color: var(--demo-accent) !important;
    border-color: var(--demo-accent) !important;
    color: var(--demo-ink-strong) !important;
}

/* (4) warning — FILL lime w/ muted hairline: lime bg / ink, muted border */
/*     -> hover ink bg / lime                                              */
.demo-mode .btn-warning,
.demo-mode .btn-warning.text-white {
    background-color: var(--demo-accent) !important;
    border: 2px solid var(--demo-muted) !important;
    color: var(--demo-ink) !important;
    box-shadow: none !important;
}

.demo-mode .btn-warning:hover,
.demo-mode .btn-warning:focus,
.demo-mode .btn-warning:active,
.demo-mode .btn-warning.active,
.demo-mode .btn-warning.text-white:hover,
.demo-mode .btn-warning.text-white:focus {
    background-color: var(--demo-ink) !important;
    border-color: var(--demo-ink) !important;
    color: var(--demo-accent) !important;
}

/* (5) secondary — OUTLINE ink: transparent / ink border+label */
/*     -> hover ink bg / light label                                      */
.demo-mode .btn-secondary,
.demo-mode .btn-secondary.text-white {
    background-color: transparent !important;
    border: 2px solid var(--demo-ink) !important;
    color: var(--demo-ink) !important;
    box-shadow: none !important;
}
.demo-mode .btn-secondary:hover,
.demo-mode .btn-secondary:focus,
.demo-mode .btn-secondary:active,
.demo-mode .btn-secondary.active,
.demo-mode .btn-secondary.text-white:hover,
.demo-mode .btn-secondary.text-white:focus {
    background-color: var(--demo-ink) !important;
    border-color: var(--demo-ink) !important;
    color: var(--demo-bg) !important;
}

/* (6) info — OUTLINE muted: transparent / muted border, ink label */
/*     -> hover muted bg / ink label                                      */
.demo-mode .btn-info,
.demo-mode .btn-info.text-white {
    background-color: transparent !important;
    border: 2px solid var(--demo-muted) !important;
    color: var(--demo-ink) !important;
    box-shadow: none !important;
}
.demo-mode .btn-info:hover,
.demo-mode .btn-info:focus,
.demo-mode .btn-info:active,
.demo-mode .btn-info.active,
.demo-mode .btn-info.text-white:hover,
.demo-mode .btn-info.text-white:focus {
    background-color: var(--demo-muted) !important;
    border-color: var(--demo-muted) !important;
    color: var(--demo-ink) !important;
}

/* (7) dark — OUTLINE black: transparent / black border+label */
/*     -> hover black bg / light label                                    */
.demo-mode .btn-dark,
.demo-mode .btn-dark.text-white {
    background-color: transparent !important;
    border: 2px solid var(--demo-ink-strong) !important;
    color: var(--demo-ink-strong) !important;
    box-shadow: none !important;
}

.demo-mode .btn-dark:hover,
.demo-mode .btn-dark:focus,
.demo-mode .btn-dark:active,
.demo-mode .btn-dark.active,
.demo-mode .btn-dark.text-white:hover,
.demo-mode .btn-dark.text-white:focus {
    background-color: var(--demo-ink-strong) !important;
    border-color: var(--demo-ink-strong) !important;
    color: var(--demo-bg) !important;
}

/* (8) light — OUTLINE on light surface: #F3F8F0 bg / muted border, ink */
/*     -> hover muted bg / ink label                                      */
.demo-mode .btn-light,
.demo-mode .btn-light.text-white {
    background-color: var(--demo-bg) !important;
    border: 2px solid var(--demo-muted) !important;
    color: var(--demo-ink) !important;
    box-shadow: none !important;
}
.demo-mode .btn-light:hover,
.demo-mode .btn-light:focus,
.demo-mode .btn-light:active,
.demo-mode .btn-light.active,
.demo-mode .btn-light.text-white:hover,
.demo-mode .btn-light.text-white:focus {
    background-color: var(--demo-muted) !important;
    border-color: var(--demo-muted) !important;
    color: var(--demo-ink) !important;
}

/* ---- Links ---------------------------------------------------------- */
.demo-mode a {
    color: var(--demo-ink);
}

.demo-mode a:hover {
    color: var(--demo-ink-strong);
}

/* Button-shaped links keep the dark label on the lime fill */
.demo-mode a.btn,
.demo-mode button.btn {
    color: var(--demo-ink);
}

/* ---- Text helpers: every contextual text colour -> dark ink --------- */
/* Lime is unreadable as text, and the point is a monochrome, calm look. */
.demo-mode .text-primary,
.demo-mode .text-success,
.demo-mode .text-danger,
.demo-mode .text-secondary,
.demo-mode .text-info,
.demo-mode .text-warning,
.demo-mode .text-dark {
    color: var(--demo-ink) !important;
}

.demo-mode .text-light {
    color: var(--demo-muted) !important;
}

/* ---- Background helpers (incl. .nav-link status tabs) --------------- */
/* These mirror the 8 button variants so a bg-X tab/chip matches btn-X,   */
/* and — crucially — each gets a :hover rule, otherwise the underlying     */
/* Bootstrap/.nav-link hover brings back the original red/blue/yellow.     */
/* .text-white on the tabs is overridden so the label stays legible.      */

/* (1) bg-primary — lime / ink -> hover ink / lime */
.demo-mode .bg-primary,
.demo-mode .bg-primary.text-white,
.demo-mode .bg-primary .badge-light {
    background-color: var(--demo-accent) !important;
    color: var(--demo-ink) !important;
}
.demo-mode a.bg-primary:hover,
.demo-mode a.bg-primary:focus {
    background-color: var(--demo-ink) !important;
    color: var(--demo-accent) !important;
}

/* (2) bg-success — ink / lime -> hover lime / ink */
.demo-mode .bg-success,
.demo-mode .bg-success.text-white {
    background-color: var(--demo-ink) !important;
    color: var(--demo-accent) !important;
}
.demo-mode a.bg-success:hover,
.demo-mode a.bg-success:focus {
    background-color: var(--demo-accent) !important;
    color: var(--demo-ink) !important;
}

/* (3) bg-danger — black / lime -> hover lime / black */
.demo-mode .bg-danger,
.demo-mode .bg-danger.text-white {
    background-color: var(--demo-ink-strong) !important;
    color: var(--demo-accent) !important;
}
.demo-mode a.bg-danger:hover,
.demo-mode a.bg-danger:focus {
    background-color: var(--demo-accent) !important;
    color: var(--demo-ink-strong) !important;
}

/* (4) bg-warning — lime / ink, muted hairline -> hover ink / lime */
.demo-mode .bg-warning,
.demo-mode .bg-warning.text-white {
    background-color: var(--demo-accent) !important;
    color: var(--demo-ink) !important;
    border: 1px solid var(--demo-muted) !important;
}
.demo-mode a.bg-warning:hover,
.demo-mode a.bg-warning:focus {
    background-color: var(--demo-ink) !important;
    color: var(--demo-accent) !important;
}

/* (5) bg-info — light surface / ink (no border: bg-* is used on accordion
   headers etc., where an added hairline looks wrong) */
.demo-mode .bg-info,
.demo-mode .bg-info.text-white {
    background-color: var(--demo-bg) !important;
    color: var(--demo-ink) !important;
}
.demo-mode a.bg-info:hover,
.demo-mode a.bg-info:focus {
    background-color: var(--demo-muted) !important;
    color: var(--demo-ink) !important;
}

/* (6) bg-secondary — light surface / ink (no border, see bg-info note) */
.demo-mode .bg-secondary,
.demo-mode .bg-secondary.text-white {
    background-color: var(--demo-bg) !important;
    color: var(--demo-ink) !important;
}
.demo-mode a.bg-secondary:hover,
.demo-mode a.bg-secondary:focus {
    background-color: var(--demo-ink) !important;
    color: var(--demo-bg) !important;
}

/* (7) bg-dark — black / light -> hover light / black.
   Excludes .app-sidebar (which carries .bg-dark but must stay light). */
.demo-mode .bg-dark:not(.app-sidebar),
.demo-mode .bg-dark.text-white:not(.app-sidebar) {
    background-color: var(--demo-ink-strong) !important;
    color: var(--demo-bg) !important;
}
.demo-mode a.bg-dark:hover,
.demo-mode a.bg-dark:focus {
    background-color: var(--demo-bg) !important;
    color: var(--demo-ink-strong) !important;
}

/* (8) bg-light — light surface / ink (no border, see bg-info note) */
.demo-mode .bg-light,
.demo-mode .bg-light.text-white {
    background-color: var(--demo-bg) !important;
    color: var(--demo-ink) !important;
}
.demo-mode a.bg-light:hover,
.demo-mode a.bg-light:focus {
    background-color: var(--demo-muted) !important;
    color: var(--demo-ink) !important;
}

/* The count badge inside the tabs ( .badge-light ) follows the tab's own
   label colour so it stays readable on every tab background and hover. */
.demo-mode .nav-link.bg-primary .badge-light,
.demo-mode .nav-link.bg-warning .badge-light,
.demo-mode .nav-link.bg-info .badge-light,
.demo-mode .nav-link.bg-secondary .badge-light,
.demo-mode .nav-link.bg-light .badge-light {
    background-color: transparent !important;
    color: var(--demo-ink) !important;
    border: 1px solid var(--demo-ink) !important;
}
.demo-mode .nav-link.bg-success .badge-light,
.demo-mode .nav-link.bg-danger .badge-light,
.demo-mode .nav-link.bg-dark .badge-light {
    background-color: transparent !important;
    color: var(--demo-accent) !important;
    border: 1px solid var(--demo-accent) !important;
}

/* On hover the solid (ink/black) tabs flip to a lime fill, so their lime
   badge would vanish — switch the badge to dark ink text + border to keep
   it readable on the lime hover background. */
.demo-mode a.nav-link.bg-success:hover .badge-light,
.demo-mode a.nav-link.bg-success:focus .badge-light,
.demo-mode a.nav-link.bg-danger:hover .badge-light,
.demo-mode a.nav-link.bg-danger:focus .badge-light,
.demo-mode a.nav-link.bg-dark:hover .badge-light,
.demo-mode a.nav-link.bg-dark:focus .badge-light {
    color: var(--demo-ink) !important;
    border-color: var(--demo-ink) !important;
}

/* Mirror case: the lime/light tabs flip to an INK fill on hover, so their
   ink badge would vanish — switch it to a lime text + border instead. */
.demo-mode a.nav-link.bg-primary:hover .badge-light,
.demo-mode a.nav-link.bg-primary:focus .badge-light,
.demo-mode a.nav-link.bg-warning:hover .badge-light,
.demo-mode a.nav-link.bg-warning:focus .badge-light,
.demo-mode a.nav-link.bg-info:hover .badge-light,
.demo-mode a.nav-link.bg-info:focus .badge-light,
.demo-mode a.nav-link.bg-secondary:hover .badge-light,
.demo-mode a.nav-link.bg-secondary:focus .badge-light,
.demo-mode a.nav-link.bg-light:hover .badge-light,
.demo-mode a.nav-link.bg-light:focus .badge-light {
    color: var(--demo-accent) !important;
    border-color: var(--demo-accent) !important;
}

/* ---- Badges: 8 distinct variants mirroring the 8 button variants ----- */
/* Same visual language as the buttons so a badge-X reads like a btn-X:     */
/* 3 solid (lime / ink / black), 1 lime+muted, 4 outline (ink/muted/black/  */
/* light). Badges aren't interactive, so there's no hover.                 */

/* primary — lime fill, ink text */
.demo-mode .badge-primary {
    background-color: var(--demo-accent) !important;
    color: var(--demo-ink) !important;
    border: 1px solid var(--demo-accent) !important;
}
/* success — solid ink fill, lime text */
.demo-mode .badge-success {
    background-color: var(--demo-ink) !important;
    color: var(--demo-accent) !important;
    border: 1px solid var(--demo-ink) !important;
}
/* danger — solid black fill, lime text */
.demo-mode .badge-danger {
    background-color: var(--demo-ink-strong) !important;
    color: var(--demo-accent) !important;
    border: 1px solid var(--demo-ink-strong) !important;
}
/* warning — lime fill, ink text, muted hairline */
.demo-mode .badge-warning {
    background-color: var(--demo-accent) !important;
    color: var(--demo-ink) !important;
    border: 1px solid var(--demo-muted) !important;
}
/* secondary — ink outline */
.demo-mode .badge-secondary {
    background-color: transparent !important;
    color: var(--demo-ink) !important;
    border: 1px solid var(--demo-ink) !important;
}
/* info — muted outline */
.demo-mode .badge-info {
    background-color: transparent !important;
    color: var(--demo-ink) !important;
    border: 1px solid var(--demo-muted) !important;
}
/* dark — black outline */
.demo-mode .badge-dark {
    background-color: transparent !important;
    color: var(--demo-ink-strong) !important;
    border: 1px solid var(--demo-ink-strong) !important;
}
/* light — light surface, muted hairline, ink text */
.demo-mode .badge-light {
    background-color: var(--demo-bg) !important;
    color: var(--demo-ink) !important;
    border: 1px solid var(--demo-muted) !important;
}

/* ---- Borders: all contextual borders -> muted hairline -------------- */
.demo-mode .border-primary,
.demo-mode .border-success,
.demo-mode .border-danger,
.demo-mode .border-secondary,
.demo-mode .border-info,
.demo-mode .border-warning,
.demo-mode .border-light,
.demo-mode .border-dark {
    border-color: var(--demo-muted) !important;
}

/* ---- Table contextual row highlights: faint light wash -------------- */
.demo-mode .table-danger,
.demo-mode .table-danger > td,
.demo-mode .table-danger > th,
.demo-mode .table-success,
.demo-mode .table-success > td,
.demo-mode .table-success > th,
.demo-mode .table-info,
.demo-mode .table-info > td,
.demo-mode .table-info > th,
.demo-mode .table-warning,
.demo-mode .table-warning > td,
.demo-mode .table-warning > th {
    background-color: var(--demo-bg) !important;
}

/* ---- Alerts: light surface + dark text; fill-family keeps a lime edge,
   neutral family a muted hairline ------------------------------------- */
.demo-mode .alert-primary,
.demo-mode .alert-success,
.demo-mode .alert-danger {
    color: var(--demo-ink) !important;
    background-color: var(--demo-bg) !important;
    border-color: var(--demo-accent) !important;
}

.demo-mode .alert-secondary,
.demo-mode .alert-info,
.demo-mode .alert-warning,
.demo-mode .alert-light,
.demo-mode .alert-dark {
    color: var(--demo-ink) !important;
    background-color: var(--demo-bg) !important;
    border-color: var(--demo-muted) !important;
}

/* ---- Form controls focus ring (lime) -------------------------------- */
.demo-mode .form-control:focus {
    border-color: var(--demo-accent);
    box-shadow: 0 0 0 0.2rem rgba(239, 255, 174, 0.6);
}

/* ------------------------------------------------------------------ */
/* Documents card on /client/{id}/show: inverted emphasis — buttons    */
/* start as dark ink with a lime label, then flip to the lime fill on   */
/* hover (the reverse of the default button, to set the card apart).    */
/* ------------------------------------------------------------------ */
.demo-mode .demo-documents-card .btn-primary,
.demo-mode .demo-documents-card .btn-success,
.demo-mode .demo-documents-card .btn-danger,
.demo-mode .demo-documents-card .btn-primary i,
.demo-mode .demo-documents-card .btn-success i,
.demo-mode .demo-documents-card .btn-danger i,
.demo-mode .demo-documents-card .btn-primary.text-white,
.demo-mode .demo-documents-card .btn-success.text-white,
.demo-mode .demo-documents-card .btn-danger.text-white {
    background-color: var(--demo-ink) !important;
    border-color: var(--demo-ink) !important;
    color: var(--demo-accent) !important;
}

.demo-mode .demo-documents-card .btn-primary:hover,
.demo-mode .demo-documents-card .btn-primary:focus,
.demo-mode .demo-documents-card .btn-primary:active,
.demo-mode .demo-documents-card .btn-success:hover,
.demo-mode .demo-documents-card .btn-success:focus,
.demo-mode .demo-documents-card .btn-success:active,
.demo-mode .demo-documents-card .btn-danger:hover,
.demo-mode .demo-documents-card .btn-danger:focus,
.demo-mode .demo-documents-card .btn-danger:active {
    background-color: var(--demo-accent) !important;
    border-color: var(--demo-accent) !important;
    color: var(--demo-ink) !important;
}

.demo-mode .demo-documents-card a {
    color: var(--demo-ink);
}

.demo-mode .demo-documents-card a:hover {
    color: var(--demo-ink-strong);
}

/* ====================================================================== */
/* Project-specific (non-Bootstrap) colours pulled into the palette.       */
/* ====================================================================== */

/* Pagination: the active/base page links use the brand red by default.    */
.demo-mode .page-link {
    color: var(--demo-ink) !important;
}
.demo-mode .page-item.active .page-link,
.demo-mode .page-link:hover,
.demo-mode .page-link:focus {
    background-color: var(--demo-accent) !important;
    border-color: var(--demo-muted) !important;
    color: var(--demo-ink) !important;
}
.demo-mode .page-link {
    border-color: var(--demo-muted) !important;
}

/* Custom row / marker highlights (VIP, phone-number duplicate) were pink
   (#ffe1e1); KEE was teal. Map all to a faint neutral/lime wash so the
   row still reads as "flagged" but stays on-palette. */
.demo-mode .bg-vip,
.demo-mode .bg-duplicate-by-phone-number {
    background-color: #fbfde8 !important; /* very faint lime tint of #EFFFAE */
}
.demo-mode .bg-kee {
    background-color: var(--demo-bg) !important;
}
.demo-mode .border-vip {
    border-color: var(--demo-muted) !important;
}

/* Required-field asterisk (was #e32 red) */
.demo-mode label.required:after {
    color: var(--demo-ink) !important;
}

/* Avatar fallback circles (initials) render on the brand red; make them
   dark ink so the white initials stay legible and on-palette. */
.demo-mode .avatar-icon,
.demo-mode .avatar-icon.rounded,
.demo-mode .avatar-icon-wrapper > div {
    background-color: var(--demo-ink) !important;
    color: var(--demo-bg) !important;
}

/* Highlighted-mentor cards use an E.ON teal background; swap for the light
   surface with a muted hairline so they match the rest of demo mode. */
.demo-mode .widget-content.bg-highlight,
.demo-mode [class*="mentor"] .widget-content,
.demo-mode .card-highlight {
    background-color: var(--demo-bg) !important;
    border: 1px solid var(--demo-muted) !important;
}

/* ====================================================================== */
/* Table row action buttons: keep the per-variant look (so buttons stay     */
/* differentiated — fill vs outline), but tuned for a dense icon .btn-group:*/
/*   - borders forced to a uniform 1px so grouped edges don't double up     */
/*   - the two black-solid variants (danger, dark) become ink OUTLINE here  */
/*     instead of solid black, so a danger-heavy row isn't a wall of black  */
/*   - <i> is always transparent / borderless / colour:inherit (clean glyph)*/
/* Variants that fall through unchanged: primary (lime fill), success (ink  */
/* solid), warning (lime + muted border), secondary/info/light (outlines).  */
/* ---------------------------------------------------------------------- */

/* Uniform thin border for every row button so the group reads as one unit */
.demo-mode td .btn-group .btn,
.demo-mode td .btn.btn-icon,
.demo-mode td .btn.btn-sm,
.demo-mode .btn-actions-pane-right .btn-group .btn {
    border-width: 1px !important;
    box-shadow: none !important;
}

/* danger + dark inside rows: ink outline instead of solid black fill */
/* dark inside rows: ink OUTLINE at rest -> solid ink on hover */
.demo-mode td .btn-group .btn.btn-dark,
.demo-mode td .btn.btn-dark.btn-icon,
.demo-mode td .btn.btn-dark.btn-sm {
    background-color: transparent !important;
    border: 1px solid var(--demo-ink) !important;
    color: var(--demo-ink) !important;
}
.demo-mode td .btn-group .btn.btn-dark:hover,
.demo-mode td .btn.btn-dark.btn-icon:hover,
.demo-mode td .btn.btn-dark.btn-sm:hover {
    background-color: var(--demo-ink) !important;
    border-color: var(--demo-ink) !important;
    color: var(--demo-accent) !important;
}

/* danger inside rows: INVERTED vs the others — solid ink + lime icon at
   rest, flipping to an ink outline + ink icon on hover. */
.demo-mode td .btn-group .btn.btn-danger,
.demo-mode td .btn.btn-danger.btn-icon,
.demo-mode td .btn.btn-danger.btn-sm {
    background-color: var(--demo-ink) !important;
    border: 1px solid var(--demo-ink) !important;
    color: var(--demo-accent) !important;
}
.demo-mode td .btn-group .btn.btn-danger:hover,
.demo-mode td .btn.btn-danger.btn-icon:hover,
.demo-mode td .btn.btn-danger.btn-sm:hover {
    background-color: transparent !important;
    border-color: var(--demo-muted) !important;
    color: var(--demo-ink) !important;
}

/* <i> normalisation for every row button, rest + hover: no block, no border,
   glyph inherits the button's current colour. */
.demo-mode td .btn-group .btn i,
.demo-mode td .btn.btn-icon i,
.demo-mode td .btn.btn-sm i,
.demo-mode td .btn-group .btn i:before,
.demo-mode td .btn.btn-icon i:before,
.demo-mode td .btn.btn-sm i:before,
.demo-mode td .btn-group .btn:hover i,
.demo-mode td .btn.btn-icon:hover i,
.demo-mode td .btn.btn-sm:hover i,
.demo-mode td .btn-group .btn:hover i:before,
.demo-mode td .btn.btn-icon:hover i:before,
.demo-mode td .btn.btn-sm:hover i:before {
    background: transparent !important;
    border: 0 !important;
    color: inherit !important;
}

/* ====================================================================== */
/* Icon <i> normalisation — MUST stay last so it wins the cascade.         */
/* The theme gives some icon <i> elements a solid (often black) background  */
/* and a 2px black border, turning the icon into a filled block that hides  */
/* the glyph. Neutralise every demo-button icon: no background, no border,  */
/* and force BOTH the <i> and its ::before glyph to inherit the button's    */
/* current text colour. This is the single source of truth for icon colour, */
/* so rest and hover can never disagree: lime button -> ink icon; a button  */
/* that turns black on hover -> lime icon, automatically.                   */
/* ---------------------------------------------------------------------- */
.demo-mode .btn i,
.demo-mode .btn i:before,
.demo-mode .btn:hover i,
.demo-mode .btn:hover i:before,
/* Variant-qualified copies so this out-ranks the per-variant border rules
   (e.g. `.demo-mode .btn-warning i` which otherwise keeps a 2px border). */
.demo-mode .btn-primary i, .demo-mode .btn-secondary i, .demo-mode .btn-success i,
.demo-mode .btn-info i, .demo-mode .btn-warning i, .demo-mode .btn-danger i,
.demo-mode .btn-light i, .demo-mode .btn-dark i,
.demo-mode .btn-primary i:before, .demo-mode .btn-secondary i:before, .demo-mode .btn-success i:before,
.demo-mode .btn-info i:before, .demo-mode .btn-warning i:before, .demo-mode .btn-danger i:before,
.demo-mode .btn-light i:before, .demo-mode .btn-dark i:before {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

.card-header-tabs a.nav-link {
    border-radius: 0.25rem;
}

/* ====================================================================== */
/* Status-bar dots (sw-theme-dots) — re-skin the .done / .active states    */
/* into the demo palette. Base theme uses green (#5cb85c) for done and      */
/* light-blue (#5bc0de) for active; neither belongs to the everest look.    */
/* .done  -> ink (the theme's "completed/solid" signal).                    */
/* .active -> ink-strong text + lime dot, so the lime stays the "current"   */
/*            marker while the label remains readable on the light surface. */
/* The .demo-mode prefix out-ranks the un-prefixed app.css rules; .active   */
/* keeps !important because the original rule is !important too.            */
/* ---------------------------------------------------------------------- */
.demo-mode .sw-theme-dots > .nav .nav-link.done {
    color: var(--demo-ink);
}

.demo-mode .sw-theme-dots > .nav .nav-link.done::after {
    background-color: var(--demo-ink);
}

.demo-mode .sw-theme-dots > .nav .nav-link.active {
    color: var(--demo-ink-strong) !important;
}

.demo-mode .sw-theme-dots > .nav .nav-link.active::after {
    background-color: var(--demo-accent) !important;
    /* Lime on the light surface is faint; an ink ring (theme's lime-fill +
       ink-border pattern) keeps the current-step dot clearly visible. */
    border: 2px solid var(--demo-ink) !important;
}

/* ====================================================================== */
/* Bootstrap .nav-tabs (all of them, incl. #clientProfileTabs). Base theme */
/* colours links + the active tab with brand red (#ea1c0a); re-skin into    */
/* the demo palette. Inactive = ink label on transparent, hover ->          */
/* ink-strong (replaces the red hover). Active = lime fill + ink label with */
/* an ink border, mirroring the theme's lime "active/current" signal (same  */
/* logic as the status dots and btn-primary).                               */
/* ---------------------------------------------------------------------- */
.demo-mode .nav-tabs .nav-link {
    color: var(--demo-ink) !important;
    background-color: transparent !important;
}

.demo-mode .nav-tabs .nav-link:hover,
.demo-mode .nav-tabs .nav-link:focus {
    color: var(--demo-ink-strong) !important;
    border-color: var(--demo-muted) var(--demo-muted) transparent !important;
}

.demo-mode .nav-tabs .nav-link.active {
    color: var(--demo-ink) !important;
    background-color: var(--demo-accent) !important;
    border-color: var(--demo-ink) var(--demo-ink) var(--demo-accent) !important;
}

/* ====================================================================== */
/* Toastr notifications (.toast / .toast-success / -error / -info /        */
/* -warning). Base theme uses green/red/turquoise/yellow fills; re-skin     */
/* into the demo palette following the button variant mapping: success=ink, */
/* error=black (most prominent), info=muted, warning=lime. Light fills      */
/* (info/warning) take an ink label; dark fills keep white text. The        */
/* `#toast-container > .toast-X` icon background-images are left intact.     */
/* ---------------------------------------------------------------------- */
.demo-mode .toast {
    background-color: var(--demo-ink) !important;
}

.demo-mode .toast-success {
    background-color: var(--demo-ink) !important;
    color: #fff !important;
}

.demo-mode .toast-error {
    background-color: var(--demo-ink-strong) !important;
    color: #fff !important;
}

.demo-mode .toast-info {
    background-color: var(--demo-muted) !important;
    color: var(--demo-ink) !important;
}

.demo-mode .toast-warning {
    background-color: var(--demo-accent) !important;
    color: var(--demo-ink) !important;
}

.demo-mode .toast-progress {
    background-color: var(--demo-ink-strong) !important;
}

/* ====================================================================== */
/* Date picker (.datepicker-panel day cells). Base theme: red hover,       */
/* yellow highlighted (today), green picked. Re-skin into the demo palette: */
/* hover = ink fill (theme's invert-hover), highlighted/today = lime (the   */
/* "warning/highlight" signal, ink label), picked = ink-strong black so the */
/* selected day stands clearly apart from the lime highlight. The muted/    */
/* disabled greys and the plain white cell are left as-is (already neutral).*/
/* ---------------------------------------------------------------------- */
.demo-mode .datepicker-panel > ul > li:hover {
    background-color: var(--demo-ink) !important;
    color: #fff !important;
}

.demo-mode .datepicker-panel > ul > li.highlighted,
.demo-mode .datepicker-panel > ul > li.highlighted:hover {
    background-color: var(--demo-accent) !important;
    color: var(--demo-ink) !important;
}

.demo-mode .datepicker-panel > ul > li.picked,
.demo-mode .datepicker-panel > ul > li.picked:hover {
    background: var(--demo-ink-strong) !important;
    color: #fff !important;
}

/* ====================================================================== */
/* Card-header tab nav (.card-header > .nav .nav-link). Base theme paints   */
/* the hover/active label and the 4px ::before underline accent brand red   */
/* (#ea1c0a). Neutralise into the demo palette: the ::before accent bar     */
/* goes transparent (per request — it should not show), and the hover/      */
/* active label switches from red to ink.                                   */
/* ---------------------------------------------------------------------- */
.demo-mode .card-header > .nav .nav-link::before {
    background: transparent !important;
}

.demo-mode .card-header > .nav .nav-link:hover,
.demo-mode .card-header > .nav .nav-link.active {
    color: var(--demo-ink) !important;
}