/* ==========================================================================
   GroFresh Admin — Modern UI theme layer (Light SaaS · Indigo)
   Presentation only. Loaded AFTER the base theme so it refines the look
   without touching any application logic. Safe to remove to revert.
   ========================================================================== */

:root {
    /* Brand / accent */
    --mu-brand: #4f46e5;          /* indigo-600 */
    --mu-brand-600: #4f46e5;
    --mu-brand-700: #4338ca;
    --mu-brand-500: #6366f1;
    --mu-brand-soft: #eef2ff;     /* soft indigo tint */
    --mu-brand-ring: rgba(79, 70, 229, .18);

    /* Sidebar submenu "current page" — light green, so a child page reads as a
       softer echo of its indigo parent instead of competing with it. */
    --mu-subnav-active-bg: #a7f3c4;   /* light green, saturated enough to catch the eye */
    --mu-subnav-active-fg: #14532d;   /* green-900 */

    /* Neutrals */
    --mu-bg: #f6f7fb;             /* page background */
    --mu-surface: #ffffff;        /* cards / panels */
    --mu-border: #e9edf5;         /* hairline borders */
    --mu-border-strong: #dfe4ee;
    --mu-text: #0f172a;           /* headings */
    --mu-body: #475569;           /* body text */
    --mu-muted: #94a3b8;          /* muted / meta */

    /* State colors */
    --mu-success: #10b981;
    --mu-warning: #f59e0b;
    --mu-danger:  #ef4444;
    --mu-info:    #3b82f6;

    /* Shape & depth */
    --mu-radius: 14px;
    --mu-radius-sm: 10px;
    --mu-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --mu-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --mu-shadow-md: 0 6px 18px -6px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);

    --mu-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* -------- Base ---------------------------------------------------------- */
body {
    font-family: var(--mu-font) !important;
    background-color: var(--mu-bg) !important;
    color: var(--mu-body);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.05px;
}

.main, .content { color: var(--mu-body); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-header-title, .card-title, .card-header-title {
    color: var(--mu-text) !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px;
}

a { color: var(--mu-brand-600); }
a:hover { color: var(--mu-brand-700); }

/* -------- Cards --------------------------------------------------------- */
.card {
    background: var(--mu-surface) !important;
    border: 1px solid var(--mu-border) !important;
    border-radius: var(--mu-radius) !important;
    box-shadow: var(--mu-shadow) !important;
    transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--mu-shadow-md) !important; }

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--mu-border) !important;
    padding: 1rem 1.25rem !important;
}
.card-footer { background: transparent !important; border-top: 1px solid var(--mu-border) !important; }

/* -------- Buttons ------------------------------------------------------- */
.btn {
    border-radius: var(--mu-radius-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn--primary {
    background-color: var(--mu-brand-600) !important;
    border-color: var(--mu-brand-600) !important;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .25) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn--primary:hover { background-color: var(--mu-brand-700) !important; border-color: var(--mu-brand-700) !important; }
.btn-primary:focus, .btn--primary:focus { box-shadow: 0 0 0 3px var(--mu-brand-ring) !important; }

.btn-outline-primary {
    color: var(--mu-brand-600) !important;
    border-color: var(--mu-brand-600) !important;
}
.btn-outline-primary:hover { background: var(--mu-brand-600) !important; color: #fff !important; }

.btn-soft-primary, .btn-ghost-primary {
    background: var(--mu-brand-soft) !important;
    color: var(--mu-brand-700) !important;
    border-color: transparent !important;
}

.btn-success { background-color: var(--mu-success) !important; border-color: var(--mu-success) !important; }
.btn-danger  { background-color: var(--mu-danger)  !important; border-color: var(--mu-danger)  !important; }
.btn-warning { background-color: var(--mu-warning) !important; border-color: var(--mu-warning) !important; color:#fff !important; }

/* -------- Forms --------------------------------------------------------- */
.form-control, .custom-select, .select2-container--default .select2-selection--single {
    border-radius: var(--mu-radius-sm) !important;
    border: 1px solid var(--mu-border-strong) !important;
    color: var(--mu-text) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.form-control:focus, .custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--mu-brand-500) !important;
    box-shadow: 0 0 0 3px var(--mu-brand-ring) !important;
}
.input-group-text { border-radius: var(--mu-radius-sm) !important; background: #f8fafc !important; border-color: var(--mu-border-strong) !important; }

/* Keep input-group parts joined: only the OUTER corners round, inner ones stay
   square, so an appended search button doesn't detach into a floating oval. */
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group-append > .input-group-text,
.input-group-append > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.input-group-prepend > .input-group-text,
.input-group-prepend > .btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* A <button class="input-group-text"> (search/submit) should read as a button */
button.input-group-text {
    background: var(--mu-brand-600) !important;
    border-color: var(--mu-brand-600) !important;
    color: #fff !important;
    cursor: pointer;
    padding-left: 14px !important;
    padding-right: 14px !important;
    transition: background-color .15s ease;
}
button.input-group-text:hover { background: var(--mu-brand-700) !important; border-color: var(--mu-brand-700) !important; }
button.input-group-text i, button.input-group-text .tio-search { color: #fff !important; }
label, .input-label { color: var(--mu-text); font-weight: 500; }

/* -------- Tables -------------------------------------------------------- */
.card .table { margin-bottom: 0; }
.table thead th {
    background: #f8fafc !important;
    color: var(--mu-muted) !important;
    font-size: .74rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-top: none !important;
    border-bottom: 1px solid var(--mu-border) !important;
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
}
.table td { border-top: 1px solid var(--mu-border) !important; color: var(--mu-body) !important; vertical-align: middle !important; }
.table-hover tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover { background-color: var(--mu-brand-soft) !important; }

/* -------- Badges -------------------------------------------------------- */
.badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: .38em .7em !important;
    letter-spacing: .01em;
}
.badge-soft-success, .badge-success { background: #dcfce7 !important; color: #047857 !important; }
.badge-soft-danger,  .badge-danger  { background: #fee2e2 !important; color: #b91c1c !important; }
.badge-soft-warning, .badge-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge-soft-info,    .badge-info    { background: #dbeafe !important; color: #1d4ed8 !important; }
.badge-soft-primary, .badge-primary { background: var(--mu-brand-soft) !important; color: var(--mu-brand-700) !important; }
.badge-soft-secondary { background: #f1f5f9 !important; color: #475569 !important; }

/* -------- Sidebar ------------------------------------------------------- */
/* Full selector list (incl. the #sidebarMain ID) so it beats the base theme's
   green brand background, which sits on a higher-specificity selector. */
aside.navbar-vertical-aside,
#sidebarMain .navbar-vertical-aside,
.navbar-vertical-aside,
.navbar-vertical-container,
.navbar-vertical-content,
.navbar-vertical-aside-initialized {
    background-color: var(--mu-surface) !important;
    background-image: none !important;
    border-right: 1px solid var(--mu-border) !important;
}
.navbar-vertical-aside .navbar-brand-wrapper {
    background-color: var(--mu-surface) !important;
    border-bottom: 1px solid var(--mu-border) !important;
}
.navbar-vertical-aside .nav-link {
    border-radius: 10px !important;
    margin: 2px 10px !important;
    padding: .6rem .75rem !important;
    color: #334155 !important;
    font-weight: 500 !important;
    transition: background-color .12s ease, color .12s ease !important;
}
.navbar-vertical-aside .nav-link .nav-icon { color: #64748b !important; transition: color .12s ease; }
.navbar-vertical-aside .nav-link:hover {
    background: var(--mu-brand-soft) !important;
    color: var(--mu-brand-700) !important;
}
.navbar-vertical-aside .nav-link:hover .nav-icon { color: var(--mu-brand-700) !important; }

/* NOTE: `.show` is deliberately NOT in this block.
   The sidebar script runs with subMenuOpenEvent:"hover" and
   subMenuInvokerActiveClass:".show", so simply hovering a menu that has a
   submenu adds .show to its <li>. Including .show here gave a hovered item the
   solid "current page" pill, so an item turned active-blue before it was
   actually active. .show is styled as hover below instead. */
.navbar-vertical-aside .nav-link.active,
.navbar-vertical-aside-has-menu.active > .nav-link {
    background: var(--mu-brand-600) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px -3px var(--mu-brand-ring) !important;
}
.navbar-vertical-aside .nav-link.active .nav-icon,
.navbar-vertical-aside-has-menu.active > .nav-link .nav-icon { color: #fff !important; }

/* submenu open on hover — same soft tint as a plain hover, never the solid pill */
.navbar-vertical-aside-has-menu.show:not(.active) > .nav-link {
    background: var(--mu-brand-soft) !important;
    color: var(--mu-brand-700) !important;
    box-shadow: none !important;
}
.navbar-vertical-aside-has-menu.show:not(.active) > .nav-link .nav-icon { color: var(--mu-brand-700) !important; }

.navbar-vertical-aside .nav-subtitle {
    color: var(--mu-muted) !important;
    font-size: .7rem !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600 !important;
}

/* Kill the theme's green left-border active indicator */
.navbar-vertical-aside .nav-link.active::before,
.navbar-vertical-aside-has-menu.show > .nav-link-toggle::before,
.navbar-vertical-aside-has-menu > .nav-link-toggle.active::before { background: transparent !important; }

/* -------- Top navbar / header ------------------------------------------ */
.navbar:not(.navbar-vertical-aside) {
    background: rgba(255, 255, 255, .85) !important;
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--mu-border) !important;
    box-shadow: var(--mu-shadow-sm) !important;
}
.navbar .navbar-brand-wrapper, .navbar-brand-wrapper {
    background: var(--mu-surface) !important;
    border-bottom: 1px solid var(--mu-border) !important;
}

/* Sidebar search field */
.sidebar--search-form, .sidebar--search-form .search--form-group {
    background: #f8fafc !important;
    border: 1px solid var(--mu-border) !important;
    border-radius: 10px !important;
}
.sidebar--search-form .form-control::placeholder { color: var(--mu-muted) !important; }

/* -------- Dashboard stat tiles ----------------------------------------- */
.card .card-subtitle, .card .text-cap { color: var(--mu-muted) !important; letter-spacing: .04em; }
.card .display-4, .card h1, .card h2 { color: var(--mu-text) !important; font-weight: 700 !important; }

.icon.icon-soft-primary, .icon-circle { border-radius: 12px !important; }

/* -------- Dropdowns / modals / pagination ------------------------------ */
.dropdown-menu {
    border: 1px solid var(--mu-border) !important;
    border-radius: var(--mu-radius) !important;
    box-shadow: var(--mu-shadow-md) !important;
    padding: .4rem !important;
}
.dropdown-item { border-radius: 8px !important; padding: .5rem .7rem !important; color: var(--mu-body) !important; }
.dropdown-item:hover { background: var(--mu-brand-soft) !important; color: var(--mu-brand-700) !important; }

.modal-content { border: none !important; border-radius: 18px !important; box-shadow: var(--mu-shadow-md) !important; }
.modal-header, .modal-footer { border-color: var(--mu-border) !important; }

/* The active page set only a background, so the number kept the .page-link colour
   (--mu-brand-700 #4338ca) and became invisible on the --mu-brand-600 #4f46e5 fill.
   Give it white text and let :hover/:focus keep it, otherwise moving the mouse over
   the current page made the digit vanish again. */
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus { background: var(--mu-brand-600) !important; border-color: var(--mu-brand-600) !important; color: #fff !important; }
.page-link { color: var(--mu-brand-700) !important; border-radius: 8px !important; margin: 0 2px; border-color: var(--mu-border) !important; }

/* -------- Misc polish --------------------------------------------------- */
.text-primary { color: var(--mu-brand-600) !important; }
.bg-primary { background-color: var(--mu-brand-600) !important; }
hr { border-color: var(--mu-border) !important; }
.breadcrumb { background: transparent !important; }
.nav-tabs .nav-link.active { color: var(--mu-brand-700) !important; border-color: transparent transparent var(--mu-brand-600) !important; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d5dbe6; border-radius: 999px; border: 2px solid var(--mu-bg); }
::-webkit-scrollbar-thumb:hover { background: #c2cad8; }

/* ==========================================================================
   Sidebar — single source of truth (supersedes the old inline "Light Slate"
   block). Covers child text/icons so nothing forces white text on hover.
   ========================================================================== */

/* default text/icon — target the label span directly (the theme colours it
   light, which inheritance from .nav-link can't override) */
.navbar-vertical-aside .nav-link,
.navbar-vertical-aside .js-navbar-vertical-aside-menu-link,
.navbar-vertical-aside .nav-link .navbar-vertical-aside-mini-mode-hidden-elements,
.navbar-vertical-aside .nav-link .text-truncate,
.navbar-vertical-aside .nav-link > span { color: #334155 !important; }
.navbar-vertical-aside .nav-link .nav-icon { color: #64748b !important; }

/* hover — soft indigo tint on the LINK, deep indigo text on link + children.
   The background must not be repeated on `*`: painting it on every descendant
   stacked a second tinted box behind the icon and label, which read as a darker
   "double" colour, and with the sidebar collapsed the icon's own box looked like
   the solid active pill. Children inherit the tint from the link. */
/* text/icon colour: link and its children */
.navbar-vertical-aside .nav-link:hover,
.navbar-vertical-aside .nav-link:hover *,
.navbar-vertical-aside .js-navbar-vertical-aside-menu-link:hover,
.navbar-vertical-aside .js-navbar-vertical-aside-menu-link:hover * {
    color: var(--mu-brand-700) !important;
}
/* children carry no background of their own … */
.navbar-vertical-aside .nav-link:hover *,
.navbar-vertical-aside .js-navbar-vertical-aside-menu-link:hover * {
    background-color: transparent !important;
}
/* … the single tinted surface belongs to the link */
.navbar-vertical-aside .nav-link:hover,
.navbar-vertical-aside .js-navbar-vertical-aside-menu-link:hover {
    background-color: var(--mu-brand-soft) !important;
}

/* active — solid indigo pill, white text (link + all children).
   `.show` is excluded here for the same reason as the earlier block: it means
   "submenu open on hover", not "current page". Backgrounds are also kept off the
   `*` children — with the sidebar collapsed only the icon is visible, so a child
   background turned the icon itself into a filled tile. */
.navbar-vertical-aside .nav-link.active,
.navbar-vertical-aside .nav-link.active *,
.navbar-vertical-aside-has-menu.active > .nav-link,
.navbar-vertical-aside-has-menu.active > .nav-link *,
.nav-item.active > .nav-link,
.nav-item.active > .nav-link *,
.nav-item.active > .js-navbar-vertical-aside-menu-link,
.nav-item.active > .js-navbar-vertical-aside-menu-link * {
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}
.navbar-vertical-aside .nav-link.active,
.navbar-vertical-aside-has-menu.active > .nav-link,
.nav-item.active > .nav-link,
.nav-item.active > .js-navbar-vertical-aside-menu-link {
    background-color: var(--mu-brand-600) !important;
}
.navbar-vertical-aside .nav-link.active { box-shadow: 0 6px 14px -6px var(--mu-brand-ring) !important; }

/* remove the theme's coloured left-indicator bar */
.navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link-toggle::before,
.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link-toggle.active::before,
.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link-toggle:hover::before,
.navbar-vertical-aside .nav-link.active::before { background-color: transparent !important; }

.navbar-vertical .navbar-nav.nav-tabs .active .nav-link,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link { border-left-color: transparent !important; }

/* toggle (hamburger/arrow) icon */
.js-navbar-vertical-aside-toggle-invoker { color: var(--mu-body) !important; }

/* ==========================================================================
   Sidebar is a `.nav-tabs` structure whose theme paints active items with the
   teal/green brand (#24bac3 / #01684b) via HIGH-specificity rules (up to 5
   classes) and a green left-border. These rules match that chain and win, so
   active/hover render INDIGO with no green border or overlay.
   ========================================================================== */

/* remove nav-tabs tab borders on every sidebar link */
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link { border: 0 !important; }

/* --------------------------------------------------------------------------
   THREE STATES, and only the link ever carries a background.
   --------------------------------------------------------------------------
   The sidebar script (vendor.min.js) runs with:
       subMenuInvokerActiveClass: ".show"
       subMenuOpenEvent:          "hover"
       hasSubMenuClass:           ".navbar-vertical-aside-has-menu"
   so HOVERING any <li class="navbar-vertical-aside-has-menu"> adds .show to it.
   Listing .show alongside .active below therefore painted a merely-hovered item
   with the solid "current page" pill — an item turned active-blue before it was
   active. Items without a submenu (e.g. AI configuration, whose <li> is a plain
   .nav-item) never get .show, which is why exactly those looked correct.

   The `*` in these selectors also repeated the background on every descendant,
   stacking a second tinted box behind the icon and label ("double colour"), and
   with the sidebar collapsed the icon's own box mimicked the active pill.

   So: .show is grouped with :hover, and backgrounds are applied to the <a> only
   while colour still cascades to children. Colour/appearance only — no width,
   padding or display is touched, because changing those broke the tooltips.
   -------------------------------------------------------------------------- */

/* colour for hover and submenu-open (children inherit via the colour rule) */
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link:hover,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link:hover *,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .show:not(.active) > .nav-link,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .show:not(.active) > .nav-link * {
    color: var(--mu-brand-700) !important;
    border-color: transparent !important;
}
/* the tinted surface — link only */
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link:hover,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .show:not(.active) > .nav-link {
    background-color: var(--mu-brand-soft) !important;
}

/* active — the current page only (li.active or a.active), never .show */
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .active > .nav-link,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .active > .nav-link *,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link.active,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link.active * {
    color: #ffffff !important;
    border-color: transparent !important;
    border-left-color: transparent !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
/* the solid pill — link only */
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .active > .nav-link,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link.active {
    background-color: var(--mu-brand-600) !important;
}

/* descendants never paint their own background in any state */
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link:hover *,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .show > .nav-link *,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .active > .nav-link *,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link.active * {
    background-color: transparent !important;
}

/* kill the green ::before indicator/overlay on active items */
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .active > .nav-link::before,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .active.nav-link::before,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .active > .nav-link-toggle::before,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .show > .nav-link-toggle::before,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link-toggle:hover::before {
    background: transparent !important;
    display: none !important;
}

/* preserved from the old inline block: tooltip + mini-mode flyout polish */
.tooltip-inner { border: 1px solid var(--mu-border) !important; }
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .js-navbar-vertical-aside-submenu,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .js-navbar-vertical-aside-submenu {
    border: 1px solid var(--mu-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--mu-shadow-md) !important;
}

/* ==========================================================================
   Collapsed sidebar: centre the icon, and turn the "…" group markers into rules
   --------------------------------------------------------------------------
   Centring is done with text-align/justify-content on the EXISTING box — the
   link keeps its own width, padding and display from the theme. An earlier
   attempt set explicit width/height/padding here and broke the tooltips, whose
   positioning depends on the theme's own box, so nothing dimensional is touched.
   ========================================================================== */
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-nav > .nav-item > .nav-link,
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-nav > .navbar-vertical-aside-has-menu > .nav-link,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .navbar-nav > .nav-item > .nav-link,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .navbar-nav > .navbar-vertical-aside-has-menu > .nav-link {
    text-align: center !important;
    justify-content: center !important;
}
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .nav-link > .nav-icon,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .nav-link > .nav-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Section separator.
   REMOVED an unscoped version of this rule: it styled .nav-subtitle-replacer in
   every state, so the divider also appeared under the section headings while the
   sidebar was EXPANDED — the heading text and a grey bar showed together. The
   replacer only stands in for the heading once the rail collapses, so the styling
   belongs under the mini/closed body classes further down, and it must be hidden
   outright while the sidebar is open. */
body:not(.navbar-vertical-aside-mini-mode):not(.navbar-vertical-aside-closed-mode)
    .navbar-vertical-aside .nav-subtitle-replacer {
    display: none !important;
}


/* --------------------------------------------------------------------------
   The 5px grey dot beside collapsed icons.
   The theme gives every submenu item a decorative bullet:
       .navbar-vertical-aside-has-menu > .nav-link-toggle::before {
           position:absolute; left:.75rem; width:5px; height:5px;
           background:#bdc5d1; opacity:0; }
   and mini mode flips it to opacity:1. Sitting at a fixed left offset, it ate
   space on the left of every has-menu row, so the icon read as pushed right and
   the highlight looked wider on one side. Earlier rules only made it
   transparent, which hid the colour but kept the box. Remove it outright while
   collapsed — the flyout already signals that a submenu exists.
   -------------------------------------------------------------------------- */
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link-toggle::before,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link-toggle::before,
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .nav-link-toggle::after,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .nav-link-toggle::after {
    display: none !important;
    content: none !important;
}
/* --------------------------------------------------------------------------
   Section divider — final form.
   Markup is  <li class="nav-item nav-item_title">
                <small class="nav-subtitle">Order management</small>
                <small class="tio-more-horizontal nav-subtitle-replacer"></small>
              </li>
   and the theme swaps which <small> is visible when the rail collapses.
   Earlier attempts left the icon-font metrics in place (line-height, padding on
   the <li>), so the rule rendered as a thick block inset from both edges.
   Every box property is reset here and the rule spans the full rail width.
   -------------------------------------------------------------------------- */
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .nav-item_title,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .nav-item_title {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .nav-item_title .nav-subtitle-replacer,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .nav-item_title .nav-subtitle-replacer {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: 9px 0 !important;
    padding: 0 !important;
    background: rgba(15, 23, 42, .22) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
}
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .nav-subtitle-replacer::before,
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .nav-subtitle-replacer::after,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .nav-subtitle-replacer::before,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .nav-subtitle-replacer::after {
    content: "" !important;
    display: none !important;
}

/* --------------------------------------------------------------------------
   Full-bleed, square highlight.
   --------------------------------------------------------------------------
   The link had `margin: 2px 10px` and `border-radius: 10px`, so the highlight
   was an inset rounded pill. Any imbalance in the icon's position inside that
   pill was therefore visible as an uneven left/right gap — which is the problem
   this replaces: a highlight that spans the rail edge to edge has no side gaps
   to be uneven in the first place.

   Only margin and border-radius change. Width, height, padding, display and
   position are left exactly as the theme sets them, because the fly-out and
   tooltip scripts measure those and previous attempts to alter them stopped the
   fly-outs opening.
   -------------------------------------------------------------------------- */
.navbar-vertical-aside .nav-link,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
}
.navbar-vertical-aside .nav-link.active,
.navbar-vertical-aside-has-menu.active > .nav-link,
.navbar-vertical-aside-has-menu.show > .nav-link,
.nav-item.active > .nav-link,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .active > .nav-link,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .nav-link.active,
.navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .show > .nav-link {
    border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   Collapsed rail: symmetric horizontal padding.
   --------------------------------------------------------------------------
   Measured in the browser, a collapsed link computed to
       width 81px, padding 9.6px 12px 9.6px 28px, justify-content: center
   with a 28px icon landing at x=35, leaving 35px on the left and 19px on the
   right. `justify-content: center` was already applying — it centres the icon
   inside the CONTENT box, but that box was itself off-centre because
   padding-left (28px) is not padding-right (12px):
       28 + (81 - 28 - 12 - 28) / 2 = 34.5  ->  the 35px measured.

   Equalising the horizontal padding centres the content box, so the icon lands
   at 26.5px with 26.5px either side. Only padding changes; width, height,
   display and position are left to the theme, which is what the fly-out and
   tooltip scripts measure.
   -------------------------------------------------------------------------- */
/* The rule to beat, found by inspecting the live cascade in a browser:
     [style.css] .navbar-vertical-aside-mini-mode
                 .navbar-vertical:not([class*="container"]) .navbar-nav .nav-link
                 { padding-left: 1.75rem !important }   (= the 28px measured)
   Its specificity is (0,5,0); an earlier attempt here scored (0,4,2) and lost.
   Matching the same chain and adding .navbar-vertical-aside gives (0,6,1). */
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside.navbar-vertical:not([class*="container"]) .navbar-nav .nav-link,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside.navbar-vertical:not([class*="container"]) .navbar-nav .nav-link {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* --------------------------------------------------------------------------
   Collapsed rail: breathing room under the logo.
   With the sidebar expanded the brand block and the first menu item are already
   separated by the search box; collapsed, the search box is hidden and the first
   icon sat directly beneath the logo. Scoped to the collapsed states only so the
   expanded layout is untouched.
   -------------------------------------------------------------------------- */
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-vertical-content > .navbar-nav,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .navbar-vertical-content > .navbar-nav {
    padding-top: 6px !important;
}

/* --------------------------------------------------------------------------
   Collapsed rail: a fly-out belongs to hover, not to the current page.
   --------------------------------------------------------------------------
   The sidebar view marks the active branch server-side:
       <li class="navbar-vertical-aside-has-menu {{ Request::is('…') ? 'show active' : '' }}">
   Expanded, that `show` correctly leaves the submenu open inline. Collapsed, the
   same class renders the submenu as a floating panel — so after clicking into a
   section its fly-out stayed pinned over the page content and never closed.

   While collapsed the submenu is therefore hidden regardless of `show`, and
   revealed only while the row is hovered. `!important` is needed because the
   theme script writes display inline.
   -------------------------------------------------------------------------- */
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-nav > li > .js-navbar-vertical-aside-submenu,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .navbar-nav > li > .js-navbar-vertical-aside-submenu {
    display: none !important;
}
body.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-nav > li:hover > .js-navbar-vertical-aside-submenu,
body.navbar-vertical-aside-closed-mode .navbar-vertical-aside .navbar-nav > li:hover > .js-navbar-vertical-aside-submenu {
    display: block !important;
}

/* --------------------------------------------------------------------------
   Owl Carousel dots and arrows.
   --------------------------------------------------------------------------
   Only owl.min.css (the CORE stylesheet) is loaded; owl.theme.default.css is
   not. The core gives .owl-dot no dimensions at all, so the guide modals
   rendered four dots that computed to 0x0 — the step counter said "1/4" but
   there was nothing to click. These are the theme styles the carousel needs,
   drawn with the panel's own tokens instead of Owl's grey defaults.
   -------------------------------------------------------------------------- */
.owl-carousel .owl-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.owl-carousel .owl-dots .owl-dot {
    width: auto !important;
    height: auto !important;
    background: transparent;
    border: 0;
    padding: 4px;
    line-height: 0;
    cursor: pointer;
}
.owl-carousel .owl-dots .owl-dot span {
    display: block !important;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mu-border-strong);
    transition: background-color .15s ease, width .15s ease;
}
.owl-carousel .owl-dots .owl-dot:hover span { background: var(--mu-brand-500); }
.owl-carousel .owl-dots .owl-dot.active span {
    background: var(--mu-brand-600);
    width: 20px;                       /* current step reads as a pill */
}

/* prev / next arrows */
.owl-carousel .owl-nav { display: flex !important; justify-content: center; gap: 10px; margin-top: 4px; }
.owl-carousel .owl-nav.disabled { display: none !important; }
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--mu-brand-soft) !important;
    color: var(--mu-brand-700) !important;
    border: 0;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background: var(--mu-brand-600) !important;
    color: #fff !important;
}
.owl-carousel .owl-nav button.disabled { opacity: .4; cursor: default; }

/* ---------------------------------------------------------------------------
   Avatars — keep them square and un-squashable.

   The theme sizes `.avatar` (35px for `avatar-sm`) but gives `.avatar-img`
   only `max-width:100%` with `height:100%`. With no explicit width the image
   keeps its intrinsic aspect ratio, so a portrait upload renders narrower
   than its round frame and `object-fit:cover` never gets to do its job.

   Worse, `.avatar` is an inline-block flex item inside `.media`, so in the
   account dropdown (a fixed 16rem box) the long e-mail address won the space
   contest and shrank the photo to a 4px slice.
   --------------------------------------------------------------------------- */
.avatar > .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media > .avatar,
.cmn--media > .avatar,
.d-flex > .avatar {
    flex: 0 0 auto;
}

/* Let the text beside an avatar shrink instead of the photo. A flex item's
   default `min-width:auto` refuses to go below its content width, which is
   what pushed the avatar out in the first place. */
.navbar-dropdown-account .media-body {
    min-width: 0;
}

.navbar-dropdown-account .media-body .card-title,
.navbar-dropdown-account .media-body .card-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A little more room so an everyday e-mail address fits without ellipsis;
   the menu is right-aligned, so growing it cannot push past the viewport. */
.navbar-dropdown-account.w-16rem {
    min-width: 19rem;
}

/* ---------------------------------------------------------------------------
   Sidebar SUBMENU active item — light green.
   ---------------------------------------------------------------------------
   Structure (read off the live DOM on /admin/analytics/keyword-search):

       li.navbar-vertical-aside-has-menu.active        <- parent, stays indigo
         a.nav-link.nav-link-toggle                        "Analytics"
         ul.js-navbar-vertical-aside-submenu.nav.nav-sub
           li.nav-item.active
             a.nav-link                                <- this one goes green

   Scoped in two directions on purpose:

   1. `.nav-sub` keeps the parent toggle indigo. The parent carries .active too
      (that is how the theme keeps the group open), so an unscoped `.active`
      selector would repaint both.

   2. `body:not(.navbar-vertical-aside-mini-mode):not(.navbar-vertical-aside-closed-mode)`
      keeps the collapsed rail's hover fly-out untouched — it reuses this exact
      `.nav-sub` markup, and the request was submenu links only, not the fly-out.

   Specificity: the indigo rule this must outrank is
       .navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs .active > .nav-link
   at (0,6,0) !important. The selectors below score (0,9,1) and (0,10,1), so
   they win on weight rather than on source order.
   --------------------------------------------------------------------------- */
body:not(.navbar-vertical-aside-mini-mode):not(.navbar-vertical-aside-closed-mode)
    .navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs
    .nav-sub .nav-item.active > .nav-link,
body:not(.navbar-vertical-aside-mini-mode):not(.navbar-vertical-aside-closed-mode)
    .navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs
    .nav-sub .nav-item.active > .nav-link * {
    color: var(--mu-subnav-active-fg) !important;
}

body:not(.navbar-vertical-aside-mini-mode):not(.navbar-vertical-aside-closed-mode)
    .navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs
    .nav-sub .nav-item.active > .nav-link {
    background-color: var(--mu-subnav-active-bg) !important;
    font-weight: 600 !important;
}

/* Descendants stay transparent so the tint is painted once, by the <a>. */
body:not(.navbar-vertical-aside-mini-mode):not(.navbar-vertical-aside-closed-mode)
    .navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs
    .nav-sub .nav-item.active > .nav-link * {
    background-color: transparent !important;
}

/* Hovering the already-active submenu item must not flip it back to indigo. */
body:not(.navbar-vertical-aside-mini-mode):not(.navbar-vertical-aside-closed-mode)
    .navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs
    .nav-sub .nav-item.active > .nav-link:hover,
body:not(.navbar-vertical-aside-mini-mode):not(.navbar-vertical-aside-closed-mode)
    .navbar-vertical.navbar-vertical-aside .navbar-nav.nav-tabs
    .nav-sub .nav-item.active > .nav-link:hover * {
    color: var(--mu-subnav-active-fg) !important;
    background-color: var(--mu-subnav-active-bg) !important;
}