/*
 * InkEnvoy Custom Theme
 * Loaded after app.min.css — CSS variable overrides only.
 * Light/dark toggle continues to function normally.
 *
 * ── Surfaces ────────────────────────────────────────────────
 * Dark:   Base #13161A · Surface #1C2028 · Raised #272E38 · Border #323A46
 * Light:  Base #F8F9FA · Surface #e7e9ec · Raised #E4E8EC · Border #D4D8DC
 *
 * ── Accent (shared) ─────────────────────────────────────────
 * Accent  #2E4D68 (light) / #3A5A78 (dark)  buttons, active tags
 * Accent+ #4A6E8E  hover
 * Tint    #FFFFFF  text on accent backgrounds
 * Wash    rgba(46, 77, 104, 0.12)  stat card highlights
 *
 * ── Text ────────────────────────────────────────────────────
 * Dark:   Primary #E8E4DF · Muted #7A8090
 * Light:  Primary #13161A · Muted #6A7280
 *
 * ── Utility ─────────────────────────────────────────────────
 * Success #4A8A3A · Warning #8A7A2A · Danger #A84830 · Disabled #4A5260
 */


/* ============================================================
   SHARED TOKENS (mode-independent)
   ============================================================ */
:root {
    --ink-accent-light:      #2E4D68;
    --ink-accent-hover:      #4A6E8E;
    --ink-accent-rgb:        46, 77, 104;
    --ink-accent-dark:       #3A5A78;
    --ink-accent-wash:      rgba(46, 77, 104, 0.12);

    --ink-success:          #4A8A3A;
    --ink-success-rgb:      74, 138, 58;
    --ink-warning:          #8A7A2A;
    --ink-warning-rgb:      138, 122, 42;
    --ink-danger:           #A84830;
    --ink-danger-rgb:       168, 72, 48;
    --ink-disabled:         #4A5260;
}


/* ============================================================
   LIGHT MODE
   ============================================================ */
:root[data-bs-theme=light],
html[data-bs-theme=light] {

    /* Surfaces */
    --ct-body-bg:                    #F8F9FA;
    --ct-secondary-bg:               #e7e9ec;
    --ct-tertiary-bg:                #E4E8EC;
    --ct-card-bg:                    #e7e9ec;
    --ct-border-color:               #D4D8DC;
    --ct-border-color-translucent:   rgba(19, 22, 26, 0.10);

    /* Text */
    --ct-body-color:                 #13161A;
    --ct-secondary-color:            #6A7280;
    --ct-emphasis-color:             #0A0D10;

    /* Links */
    --ct-link-color:                 #6A7280;
    --ct-link-hover-color:           #13161A;

    /* Bootstrap primary */
    --bs-primary:                    #2E4D68;
    --bs-primary-rgb:                46, 77, 104;
    --bs-link-color:                 #6A7280;
    --bs-link-hover-color:           #13161A;
    --bs-link-color-rgb:             106, 114, 128;

    /* Bootstrap utility overrides */
    --bs-success:                    #4A8A3A;
    --bs-success-rgb:                74, 138, 58;
    --bs-warning:                    #8A7A2A;
    --bs-warning-rgb:                138, 122, 42;
    --bs-danger:                     #A84830;
    --bs-danger-rgb:                 168, 72, 48;

    /* Form inputs */
    --ct-input-bg:                   #F8F9FA;
    --bs-body-bg:                    #F8F9FA;
    --bs-secondary-bg:               #e7e9ec;
    --bs-tertiary-bg:                #E4E8EC;
    --bs-border-color:               #D4D8DC;
    --bs-body-color:                 #13161A;
    --bs-secondary-color:            #6A7280;
}


/* ============================================================
   DARK MODE
   ============================================================ */
:root[data-bs-theme=dark],
html[data-bs-theme=dark] {

    /* Surfaces */
    --ct-body-bg:                    #13161A;
    --ct-secondary-bg:               #1C2028;
    --ct-tertiary-bg:                #272E38;
    --ct-card-bg:                    #1C2028;
    --ct-border-color:               #323A46;
    --ct-border-color-translucent:   rgba(232, 228, 223, 0.10);

    /* Text */
    --ct-body-color:                 #E8E4DF;
    --ct-secondary-color:            #7A8090;
    --ct-emphasis-color:             #F0ECE8;

    /* Links */
    --ct-link-color:                 #7A8090;
    --ct-link-hover-color:           #E8E4DF;

    /* Bootstrap primary */
    --bs-primary:                    #2E4D68;
    --bs-primary-rgb:                46, 77, 104;
    --bs-link-color:                 #7A8090;
    --bs-link-hover-color:           #E8E4DF;
    --bs-link-color-rgb:             122, 128, 144;

    /* Bootstrap utility overrides */
    --bs-success:                    #4A8A3A;
    --bs-success-rgb:                74, 138, 58;
    --bs-warning:                    #8A7A2A;
    --bs-warning-rgb:                138, 122, 42;
    --bs-danger:                     #A84830;
    --bs-danger-rgb:                 168, 72, 48;

    /* Form inputs */
    --ct-input-bg:                   #272E38;
    --bs-body-bg:                    #13161A;
    --bs-secondary-bg:               #1C2028;
    --bs-tertiary-bg:                #272E38;
    --bs-border-color:               #323A46;
    --bs-body-color:                 #E8E4DF;
    --bs-secondary-color:            #7A8090;
}


/* ============================================================
   BUTTON — PRIMARY
   Adminto sets background-color directly on .btn-primary, so
   CSS vars alone don't win — use !important on color properties.
   ============================================================ */
.btn-primary {
    --bs-btn-bg:                     #2E4D68;
    --bs-btn-border-color:           #2E4D68;
    --bs-btn-hover-bg:               #4A6E8E;
    --bs-btn-hover-border-color:     #4A6E8E;
    --bs-btn-active-bg:              #1E3D58;
    --bs-btn-active-border-color:    #1E3D58;
    --bs-btn-disabled-bg:            #4A5260;
    --bs-btn-disabled-border-color:  #4A5260;
    --bs-btn-focus-shadow-rgb:       46, 77, 104;
    background-color:  #2E4D68 !important;
    border-color:      #2E4D68 !important;
    color:             #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color:  #4A6E8E !important;
    border-color:      #4A6E8E !important;
    color:             #FFFFFF !important;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color:  #1E3D58 !important;
    border-color:      #1E3D58 !important;
    color:             #FFFFFF !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color:  #4A5260 !important;
    border-color:      #4A5260 !important;
}

.btn-outline-primary {
    --bs-btn-color:                  #2E4D68;
    --bs-btn-border-color:           #2E4D68;
    --bs-btn-hover-bg:               #2E4D68;
    --bs-btn-hover-border-color:     #2E4D68;
    --bs-btn-hover-color:            #FFFFFF;
    --bs-btn-active-bg:              #1E3D58;
    --bs-btn-active-border-color:    #1E3D58;
    --bs-btn-active-color:           #FFFFFF;
    --bs-btn-focus-shadow-rgb:       46, 77, 104;
    color:             #2E4D68 !important;
    border-color:      #2E4D68 !important;
    background-color:  transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color:  #2E4D68 !important;
    border-color:      #2E4D68 !important;
    color:             #FFFFFF !important;
}

/* Dark mode — use darker blue #3A5A78 so it's visible on dark surfaces */
html[data-bs-theme=dark] .btn-primary,
html[data-bs-theme=dark] .btn-primary:not(:hover):not(:focus):not(:active) {
    background-color:  #3A5A78 !important;
    border-color:      #3A5A78 !important;
    color:             #FFFFFF !important;
}

html[data-bs-theme=dark] .btn-primary:hover,
html[data-bs-theme=dark] .btn-primary:focus {
    background-color:  #4A6E8E !important;
    border-color:      #4A6E8E !important;
    color:             #FFFFFF !important;
}

html[data-bs-theme=dark] .btn-primary:active,
html[data-bs-theme=dark] .btn-primary.active {
    background-color:  #1E3D58 !important;
    border-color:      #1E3D58 !important;
    color:             #FFFFFF !important;
}

/* Dark mode outline variant */
html[data-bs-theme=dark] .btn-outline-primary,
html[data-bs-theme=dark] .btn-outline-primary:not(:hover):not(:active) {
    color:             #3A5A78 !important;
    border-color:      #3A5A78 !important;
    background-color:  transparent !important;
}

html[data-bs-theme=dark] .btn-outline-primary:hover,
html[data-bs-theme=dark] .btn-outline-primary:focus {
    background-color:  #3A5A78 !important;
    border-color:      #3A5A78 !important;
    color:             #FFFFFF !important;
}


/* ============================================================
   UTILITY BUTTON VARIANTS
   Adminto sets these directly too — use !important.
   ============================================================ */

/* btn-secondary — active/selected filter pills and other selected states */
.btn-secondary {
    background-color:  #4A5260 !important;
    border-color:      #4A5260 !important;
    color:             #e7e9ec !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color:  #3A4250 !important;
    border-color:      #3A4250 !important;
    color:             #e7e9ec !important;
}

html[data-bs-theme=dark] .btn-secondary {
    background-color:  #7A8090 !important;
    border-color:      #7A8090 !important;
    color:             #13161A !important;
}
html[data-bs-theme=dark] .btn-secondary:hover,
html[data-bs-theme=dark] .btn-secondary:focus {
    background-color:  #6A7080 !important;
    border-color:      #6A7080 !important;
    color:             #13161A !important;
}

/* btn-outline-secondary — Draft / Unverified / neutral inactive states */
.btn-outline-secondary {
    color:             #4A5260 !important;
    border-color:      #4A5260 !important;
    background-color:  transparent !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color:  #4A5260 !important;
    border-color:      #4A5260 !important;
    color:             #e7e9ec !important;
}

html[data-bs-theme=dark] .btn-outline-secondary {
    color:             #7A8090 !important;
    border-color:      #7A8090 !important;
    background-color:  transparent !important;
}
html[data-bs-theme=dark] .btn-outline-secondary:hover,
html[data-bs-theme=dark] .btn-outline-secondary:focus {
    background-color:  #4A5260 !important;
    border-color:      #4A5260 !important;
    color:             #E8E4DF !important;
}

.btn-success {
    --bs-btn-bg:                     #4A8A3A;
    --bs-btn-border-color:           #4A8A3A;
    --bs-btn-hover-bg:               #3A7A2A;
    --bs-btn-hover-border-color:     #3A7A2A;
    --bs-btn-focus-shadow-rgb:       74, 138, 58;
    background-color: #4A8A3A !important;
    border-color:     #4A8A3A !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: #3A7A2A !important;
    border-color:     #3A7A2A !important;
}

.btn-danger {
    --bs-btn-bg:                     #A84830;
    --bs-btn-border-color:           #A84830;
    --bs-btn-hover-bg:               #902E1A;
    --bs-btn-hover-border-color:     #902E1A;
    --bs-btn-focus-shadow-rgb:       168, 72, 48;
    background-color: #A84830 !important;
    border-color:     #A84830 !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #902E1A !important;
    border-color:     #902E1A !important;
}

.btn-warning {
    --bs-btn-bg:                     #8A7A2A;
    --bs-btn-border-color:           #8A7A2A;
    --bs-btn-hover-bg:               #746618;
    --bs-btn-hover-border-color:     #746618;
    --bs-btn-focus-shadow-rgb:       138, 122, 42;
    background-color: #8A7A2A !important;
    border-color:     #8A7A2A !important;
    color:            #F8F9FA !important;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #746618 !important;
    border-color:     #746618 !important;
}


/* ============================================================
   ADMINTO SOFT BUTTON VARIANTS
   btn-soft-* are Adminto-specific classes using their default
   purple/blue primary. Override each here.
   ============================================================ */
.btn-soft-primary {
    background-color: rgba(46, 77, 104, 0.18) !important;
    color:            #2E4D68 !important;
    border-color:     transparent !important;
}
.btn-soft-primary:hover, .btn-soft-primary:focus {
    background-color: rgba(46, 77, 104, 0.30) !important;
    color:            #1E3D58 !important;
}

.btn-soft-success {
    background-color: rgba(74, 138, 58, 0.18) !important;
    color:            #4A8A3A !important;
    border-color:     transparent !important;
}
.btn-soft-success:hover, .btn-soft-success:focus {
    background-color: rgba(74, 138, 58, 0.30) !important;
    color:            #3A7A2A !important;
}

.btn-soft-danger {
    background-color: rgba(168, 72, 48, 0.18) !important;
    color:            #A84830 !important;
    border-color:     transparent !important;
}
.btn-soft-danger:hover, .btn-soft-danger:focus {
    background-color: rgba(168, 72, 48, 0.30) !important;
    color:            #902E1A !important;
}

.btn-soft-warning {
    background-color: rgba(138, 122, 42, 0.18) !important;
    color:            #8A7A2A !important;
    border-color:     transparent !important;
}
.btn-soft-warning:hover, .btn-soft-warning:focus {
    background-color: rgba(138, 122, 42, 0.30) !important;
    color:            #746618 !important;
}

.btn-soft-secondary {
    background-color: rgba(74, 82, 96, 0.15) !important;
    color:            var(--ct-body-color) !important;
    border-color:     transparent !important;
}
.btn-soft-secondary:hover, .btn-soft-secondary:focus {
    background-color: rgba(74, 82, 96, 0.25) !important;
}

/* Dark mode soft variants — ensure text stays readable on dark surfaces */
html[data-bs-theme=dark] .btn-soft-primary {
    background-color: rgba(46, 77, 104, 0.25) !important;
    color:            #FFFFFF !important;
}
html[data-bs-theme=dark] .btn-soft-primary:hover,
html[data-bs-theme=dark] .btn-soft-primary:focus {
    background-color: rgba(46, 77, 104, 0.40) !important;
    color:            #FFFFFF !important;
}

html[data-bs-theme=dark] .btn-soft-success {
    background-color: rgba(74, 138, 58, 0.25) !important;
    color:            #8ACC78 !important;
}

html[data-bs-theme=dark] .btn-soft-danger {
    background-color: rgba(168, 72, 48, 0.25) !important;
    color:            #E07860 !important;
}

html[data-bs-theme=dark] .btn-soft-warning {
    background-color: rgba(138, 122, 42, 0.25) !important;
    color:            #C8B84A !important;
}

html[data-bs-theme=dark] .btn-soft-secondary {
    background-color: rgba(232, 228, 223, 0.10) !important;
    color:            #E8E4DF !important;
}


/* ============================================================
   LINKS
   Adminto sets a { color } directly — CSS vars alone don't win.
   All links use muted text; hover darkens to primary text.
   ============================================================ */
a,
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #6A7280 !important;
}
a:hover,
a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #13161A !important;
}

/* Dark mode */
html[data-bs-theme=dark] a,
html[data-bs-theme=dark] a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #7A8090 !important;
}
html[data-bs-theme=dark] a:hover,
html[data-bs-theme=dark] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #E8E4DF !important;
}

/* Nav links and sidebar items inherit their own color logic */
.nav-link,
.side-nav-link,
.dropdown-item {
    color: inherit;
}

/* Sidebar nav — muted text, brightens to primary on hover/active.
   Selector specificity (0,4,0) beats the general a rule (0,3,1). */
.leftside-menu .side-nav .side-nav-item .side-nav-link,
.leftside-menu .side-nav .side-nav-item .side-nav-link span {
    color: #6A7280 !important;
}
.leftside-menu .side-nav .side-nav-item .side-nav-link:hover,
.leftside-menu .side-nav .side-nav-item .side-nav-link:hover span {
    color: #13161A !important;
}
.leftside-menu .side-nav .side-nav-item.menuitem-active > .side-nav-link,
.leftside-menu .side-nav .side-nav-item.menuitem-active > .side-nav-link span {
    color: #2E4D68 !important;
}

/* Dark mode sidebar */
html[data-bs-theme=dark] .leftside-menu .side-nav .side-nav-item .side-nav-link,
html[data-bs-theme=dark] .leftside-menu .side-nav .side-nav-item .side-nav-link span {
    color: #7A8090 !important;
}
html[data-bs-theme=dark] .leftside-menu .side-nav .side-nav-item .side-nav-link:hover,
html[data-bs-theme=dark] .leftside-menu .side-nav .side-nav-item .side-nav-link:hover span {
    color: #E8E4DF !important;
}
html[data-bs-theme=dark] .leftside-menu .side-nav .side-nav-item.menuitem-active > .side-nav-link,
html[data-bs-theme=dark] .leftside-menu .side-nav .side-nav-item.menuitem-active > .side-nav-link span {
    color: #4A6E8E !important;
}


/* ============================================================
   BADGE / STATUS COLORS
   ============================================================ */
.badge.bg-success,  .badge.text-bg-success  { background-color: #4A8A3A !important; }
.badge.bg-warning,  .badge.text-bg-warning  { background-color: #8A7A2A !important; }
.badge.bg-danger,   .badge.text-bg-danger   { background-color: #A84830 !important; }
.badge.bg-primary,  .badge.text-bg-primary  { background-color: #2E4D68 !important; color: #FFFFFF !important; }
.badge.bg-secondary,.badge.text-bg-secondary{ background-color: #4A5260 !important; }


/* ============================================================
   ACCENT WASH — stat card highlights
   ============================================================ */
.ink-stat-accent {
    background-color: rgba(46, 77, 104, 0.12);
    border-left: 3px solid #2E4D68;
}
html[data-bs-theme=dark] .ink-stat-accent {
    background-color: rgba(58, 90, 120, 0.12);
    border-left: 3px solid #3A5A78;
}


/* ============================================================
   ICONS
   Target Remix (ri-*), Tabler (ti-*) and Solar icon sets.
   text-primary class and standalone icons use steel blue.
   Icons inside buttons/badges inherit white from their parent.
   ============================================================ */
i[class*="ri-"],
i[class*="ti-"],
i[class*="solar-"] {
    color: #2E4D68;
}

html[data-bs-theme=dark] i[class*="ri-"],
html[data-bs-theme=dark] i[class*="ti-"],
html[data-bs-theme=dark] i[class*="solar-"] {
    color: #3A5A78;
}

/* Icons inside buttons inherit button text color */
.btn i[class*="ri-"],
.btn i[class*="ti-"],
.btn i[class*="solar-"],
/* Icons inside badges */
.badge i[class*="ri-"],
.badge i[class*="ti-"],
.badge i[class*="solar-"],
/* Icons inside nav links stay with their parent */
.nav-link i[class*="ri-"],
.nav-link i[class*="ti-"],
.nav-link i[class*="solar-"],
.side-nav-link i[class*="ri-"],
.side-nav-link i[class*="ti-"],
.side-nav-link i[class*="solar-"],
.dropdown-item i[class*="ri-"],
.dropdown-item i[class*="ti-"],
.dropdown-item i[class*="solar-"] {
    color: inherit !important;
}

/* text-primary utility — override Bootstrap's blue */
.text-primary {
    color: #2E4D68 !important;
}
html[data-bs-theme=dark] .text-primary {
    color: #3A5A78 !important;
}

/* ============================================================
   BADGE bg-primary-subtle + text-primary
   Light: dark steel text on light subtle bg — readable
   Dark:  light sky text on dark subtle bg — readable
   ============================================================ */
.badge.bg-primary-subtle.text-primary {
    color: #3A5A78 !important;
}
html[data-bs-theme=dark] .badge.bg-primary-subtle.text-primary {
    color: rgb(220, 237, 251) !important;
}

/* ============================================================
   FORM INPUTS — input-group-text
   Bootstrap's default uses --bs-tertiary-bg which adapts to
   dark mode but looks visually detached. Pin it to match the
   adjacent form-control background for a seamless joined look.
   ============================================================ */
.input-group-text {
    background-color: #F8F9FA !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important;
}
html[data-bs-theme=dark] .input-group-text {
    background-color: #1C2028 !important;
}

/* FORM CONTROLS — light mode: white/near-white inputs */
html[data-bs-theme=light] .form-control,
html[data-bs-theme=light] .form-select,
html[data-bs-theme=light] .form-check-input {
    background-color: #F8F9FA !important;
}

/* PUBLIC NAVBAR — ensure bg-body adapts correctly */
.navbar.bg-body {
    background-color: var(--bs-body-bg) !important;
}

/* LIGHT/DARK TOGGLE — remove focus/active outline */
#light-dark-mode:focus,
#light-dark-mode:focus-visible,
#light-dark-mode:active {
    outline: none !important;
    box-shadow: none !important;
}

/* AUTH BACKGROUND — tattoo photo with a dark overlay for card legibility */
.auth-bg {
    background-image: url(../images/tattoo-bg-image.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Extend the background to the body so no gap shows below the auth-bg div */
body:has(.auth-bg) {
    background-image: url(../images/tattoo-bg-image.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}

/* Semi-transparent backdrop behind the auth form */
.auth-backdrop {
    background-color: rgba(19, 22, 26, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* All text outside the card (brand, tagline, back link) should be the same warm off-white */
.auth-backdrop > a,
.auth-backdrop > p,
.auth-backdrop > p a {
    color: rgba(232, 228, 223, 0.85) !important;
}

/* ============================================================
   STICKY TOPBAR — override Adminto's hardcoded dark background
   app.js adds .topbar-active to #header once scroll >= 25px.
   Adminto styles the inner .topbar-menu via --ct-topbar-bg, but
   only defines that variable on .app-topbar:not(.topbar-active),
   so it goes undefined (dark fallback) once sticky.
   Fix: set the variable at html level + direct override as backup.
   ============================================================ */
html[data-bs-theme=light] {
    --ct-topbar-bg: #e7e9ec;
    --ct-topbar-search-bg: #E4E8EC;
}
html[data-bs-theme=dark] {
    --ct-topbar-bg: #1C2028;
    --ct-topbar-search-bg: #272E38;
}
html[data-bs-theme=light] .app-topbar.topbar-active .topbar-menu {
    background-color: #e7e9ec !important;
}
html[data-bs-theme=dark] .app-topbar.topbar-active .topbar-menu {
    background-color: #1C2028 !important;
}
html[data-bs-theme=light] .app-topbar.topbar-active .topbar-search {
    background-color: #E4E8EC !important;
}
html[data-bs-theme=dark] .app-topbar.topbar-active .topbar-search {
    background-color: #272E38 !important;
}
/* Page title in topbar uses Adminto's item color so it stays readable in both modes */
.app-topbar .page-title {
    color: var(--ct-topbar-item-color);
}


/* ============================================================
   FOCUS RING
   ============================================================ */
:focus-visible {
    outline-color: #2E4D68;
    box-shadow: 0 0 0 0.25rem rgba(46, 77, 104, 0.25);
}

html[data-bs-theme=dark] :focus-visible {
    outline-color: #3A5A78;
    box-shadow: 0 0 0 0.25rem rgba(58, 90, 120, 0.25);
}


/* ============================================================
   WIZARD TABS (.form-wizard-header)
   Adminto's nav-pills leave text unreadable against the pill bg
   in both modes. Force legible colors here for all wizards.
   ============================================================ */

/* Inactive tab — muted text, transparent bg */
html[data-bs-theme=light] .form-wizard-header .nav-link {
    color: #6A7280 !important;
    background-color: transparent !important;
}
html[data-bs-theme=dark] .form-wizard-header .nav-link {
    color: #7A8090 !important;
    background-color: transparent !important;
}

/* Active tab — white text on accent */
html[data-bs-theme=light] .form-wizard-header .nav-link.active {
    background-color: #2E4D68 !important;
    color: #ffffff !important;
}
html[data-bs-theme=dark] .form-wizard-header .nav-link.active {
    background-color: #3A5A78 !important;
    color: #ffffff !important;
}

/* Done tab (steps already completed) — muted accent tint */
html[data-bs-theme=light] .form-wizard-header .nav-link.done {
    background-color: rgba(46, 77, 104, 0.15) !important;
    color: #2E4D68 !important;
}
html[data-bs-theme=dark] .form-wizard-header .nav-link.done {
    background-color: rgba(58, 90, 120, 0.20) !important;
    color: #8AAAC4 !important;
}



   Show warm/light logo in dark mode, icon logo in light mode.
   ============================================================ */
.navbar .logo-dark-mode  { display: none !important; }
.navbar .logo-light-mode { display: inline !important; }

html[data-bs-theme=dark] .navbar .logo-dark-mode  { display: inline !important; }
html[data-bs-theme=dark] .navbar .logo-light-mode { display: none !important; }

/* Public navbar uses Adminto logo-light/logo-dark spans; Adminto's base rule covers
   light mode (.logo .logo-light = none, .logo .logo-dark = block) but the dark-mode
   flip is only wired for .app-topbar and .sidenav-menu — add it for .navbar too. */
html[data-bs-theme=dark] .navbar .logo .logo-light { display: block !important; }
html[data-bs-theme=dark] .navbar .logo .logo-dark  { display: none !important; }