/*
 * New admin look, element by element. This file is loaded after riho.css from
 * resources/views/riho/layouts/css.blade.php: it overrides Riho, it never edits it.
 *
 * Element 1 - Typography: Montserrat (the Riho font) through --vg-font; the monospace font (--vg-mono) is the system
 * one. Riho hard-codes Montserrat in the rules
 * listed below (the body, and a few components that set their own family; 40 of the 42 selectors,
 * the demo widgets .chart-sparkline and the apex monthly-profit label keep Montserrat), so each of them is
 * repeated here with the same selector (same specificity, loaded later, so it wins). Icon fonts
 * (bootstrap-icons, FontAwesome, IcoFont, themify) are not touched. Chart libraries set their
 * own font in JS and are not affected.
 */

:root {
    --vg-font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-font-sans-serif: var(--vg-font);
    --vg-sb-bg: #23272E;
    --vg-sb-line: #343A43;
    --vg-sb-text: #B7BDC7;
    --vg-sb-muted: #8B93A0;
    --vg-sb-hover: rgba(255, 255, 255, .07);
    --vg-sb-active: rgba(255, 255, 255, .12);
    --vg-sb-scroll: #3B414B;
    --vg-sb-width: 232px;
    --vg-sb-rail: 72px;
    --vg-r-ctl: 6px;
    --vg-header-h: 60px;
    --vg-ink: #141414;
    --vg-muted: #6B625C;
    --vg-soft: #8E847D;
    --vg-line: #E9E1DA;
    --vg-line-strong: #CFC5BD;
    --vg-hover-tint: #EFEAE5;
    --vg-r-pill: 4px;
    --vg-coral-tint: #FCE9E3;
    --vg-wash: #FAF6F2;
    --vg-coral: #D93111;
    /* Main action colour: the theme's own primary (Verentia green), darker on hover. */
    --vg-action: var(--theme-deafult, #86ba3b);
    --vg-action-hover: color-mix(in srgb, var(--vg-action) 85%, #000);
    --vg-surface: #fff;
    --vg-ctl-height: 36px;
    --vg-lilac-tint: #EFEDFF;
    --vg-coral-border: #F6D3C8;
    --vg-gap-line: #D9CFC7;
    --vg-peri: #C3BDFF;
    --vg-peach: #FF9A6B;
    --vg-peach-tint: #FFF0E7;
    --vg-line-soft: #F0EAE4;
    --vg-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

body,
.badge,
.page-body-wrapper .card .sub-title,
.dropdown .dropdown-menu,
.icon-hover-bottom .btn,
.icon-hover-bottom label,
.icon-hover-bottom span,
.icon-hover-bottom .form-group input,
.bootstrap-touchspin .input-group,
.morris-hover.morris-default-style,
.list-persons p,
.monthly-profit .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-datalabel-value,
.appointment-sec .bottom-btn a,
.product-box .product-details .h4,
.product-box .product-details h4,
.demo-section .demo-box.dashboard-images .demo-detail .demo-title .h3,
.demo-section .demo-box.dashboard-images .demo-detail .demo-title h3,
.marquee .marquee-name p.big-title,
.landing-home .content p,
.landing-footer .footer-contain .h2,
.landing-footer .footer-contain h2,
.pricing-section .landing-title .h5,
.pricing-section .landing-title h5,
.pricing-section .landing-title .h4,
.pricing-section .landing-title h4,
.user-profile .follow .follow-num,
.user-profile .like-comment span,
.default-according .card .card-header .btn-link,
.page-wrapper .page-header .header-wrapper .nav-right .bookmark-flip .bookmark-dropdown .bookmark-content span,
.page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li a,
.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .qty-box .input-group .btn,
.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .qty-box .input-group input,
.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .total .h6,
.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .total h6,
.page-wrapper .page-body-wrapper .page-title .breadcrumb li,
.page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-submenu li a,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li.sidebar-list .badge,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .mega-menu-container .mega-box .link-section .submenu-title .h5,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .mega-menu-container .mega-box .link-section .submenu-title h5,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .mega-menu-container .mega-box .link-section .submenu-content.opensubmegamenu li a {
    font-family: var(--vg-font);
}

/* DataTables sets its own family (Open Sans) on the wrapper, in riho.css and in datatables.css. */
div.dataTables_wrapper {
    font-family: var(--vg-font);
}

/* =====================================================================================
 * Element 2 - Sidebar (dark graphite). Size, icons, borders, radii and item states.
 * Width 265px -> 232px (and the collapsed rail ~90px -> 72px): the 0.9 zoom is gone, so these
 * keep the sidebar at about the size it had on screen. The header, page body and footer offsets
 * follow the same widths. Markup and Riho's JS (accordion, collapse, off-canvas) are untouched.
 * Text uses #B7BDC7 on #23272E (8:1); icons and group titles use #8B93A0 (4.9:1).
 * ===================================================================================== */

/* ---------- Container ---------- */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
    width: var(--vg-sb-width);
    border-right: 1px solid var(--vg-sb-line);
    border-radius: 0;
    background: var(--vg-sb-bg);
    box-shadow: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-icon-wrapper {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .simplebar-scrollbar::before {
    background: var(--vg-sb-scroll);
}

/* ---------- Header block: smaller logo, compact height, toggle like the mockup ---------- */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
    padding: 18px 20px 14px 24px;
}

/* The image carries an inline max-width:145px !important (a cap, not a size): the 112px/40px caps below shrink it. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper img {
    width: auto;
    max-width: 112px;
    max-height: 40px;
    height: auto;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .toggle-sidebar {
    width: 28px;
    height: 28px;
    border-radius: var(--vg-r-ctl);
}

@media (min-width: 992px) {
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .toggle-sidebar {
        display: grid;
        place-items: center;
    }
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .toggle-sidebar::before {
    display: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .toggle-sidebar:hover {
    background: var(--vg-sb-hover);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .toggle-sidebar i {
    color: var(--vg-sb-muted) !important;
    font-size: 16px !important;
    line-height: 1;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .toggle-sidebar:hover i {
    color: #fff !important;
}

/* ---------- Keyboard focus (riho.css removes the outline on a:focus-visible) ---------- */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link:focus-visible,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:focus-visible,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .toggle-sidebar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* ---------- Group titles ---------- */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title {
    margin: 0;
    padding: 16px 10px 6px 24px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title::before {
    display: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title h6 {
    margin: 0;
    color: var(--vg-sb-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---------- Items (all levels) ---------- */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-list {
    padding: 0 14px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    margin-bottom: 2px;
    padding: 7px 28px 7px 10px;
    border-radius: var(--vg-r-ctl);
    background-color: transparent;
    color: var(--vg-sb-text);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: left;
}

/* Riho tree decoration (dot + elbow on links). Icon glyphs are i::before and stay visible. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link::before,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link::after {
    display: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link span {
    flex: 1;
    min-width: 0;
    color: inherit;
    letter-spacing: 0;
    text-transform: none;
}

/* Menu icons carry .text-white and .fs-6, both !important. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link > i {
    flex: none;
    width: 16px;
    color: var(--vg-sb-muted) !important;
    font-size: 15px !important;
    line-height: 1;
    text-align: center;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link > svg {
    flex: none;
    margin-right: 0;
    stroke: var(--vg-sb-muted);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link .according-menu {
    top: 50%;
    right: 10px;
    line-height: 1;
    transform: translateY(-50%);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu .submenu-title .according-menu {
    top: 50%;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link .according-menu i {
    color: var(--vg-sb-muted);
    font-size: 11px;
}

/* Hover */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-list:hover > a:hover,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li > a:hover {
    border-radius: var(--vg-r-ctl);
    background-color: var(--vg-sb-hover);
    color: #fff;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link:hover > i {
    color: #fff !important;
}

/* Riho paints the label of every .active link white (.sidebar-link.active span) and the open
   parent and the current page need the colour of their own link instead. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active span {
    color: inherit;
}

/* Open section (parent of the current page): white text, no pill. Leaves carry .link-nav. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active:not(.link-nav) {
    margin-bottom: 2px;
    background-color: transparent;
    color: #fff;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active:not(.link-nav) > i {
    color: #fff !important;
}

/* Current page: lighter fill, white text and icon. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.link-nav.active,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-list:hover > a.link-nav.active:hover {
    margin-bottom: 2px;
    border-radius: var(--vg-r-ctl);
    background-color: var(--vg-sb-active);
    box-shadow: none;
    color: #fff;
    font-weight: 500;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.link-nav.active > i {
    color: #fff !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.link-nav.active > svg {
    stroke: #fff;
}

/* ---------- Submenus (accordion) ---------- */
/* Display stays controlled by Riho JS (inline style="display:..."): never set display here. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu {
    width: auto;
    margin: 2px 0 6px 8px;
    padding: 0 0 0 14px;
    border-left: 1px solid var(--vg-sb-line);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu::before,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu::after {
    display: none;
}

/* Riho sets padding-left 50px/63px !important on these links. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu li a {
    overflow: hidden;
    padding: 7px 28px 7px 10px !important;
    color: var(--vg-sb-text);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a.active {
    color: #fff;
}

/* ---------- Submenu links: same icon + label layout as the first level ---------- */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a > i {
    flex: none;
    width: 16px;
    margin-right: 0;
    color: var(--vg-sb-muted) !important;
    font-size: 15px !important;
    line-height: 1;
    text-align: center;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a > svg {
    flex: none;
    margin-right: 0;
    stroke: var(--vg-sb-muted);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:hover > i,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a.active > i {
    color: #fff !important;
}

/* ---------- Pin badge (favourites): neutral, no green ---------- */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-list .pin-item {
    border-color: transparent;
    border-radius: 4px !important;
    background-color: rgba(255, 255, 255, .16) !important;
    color: #fff;
}

/* ---------- Widths and offsets (desktop; below 992px Riho uses its off-canvas drawer) ---------- */
@media (min-width: 992px) {
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon {
        width: var(--vg-sb-rail);
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover {
        width: var(--vg-sb-width);
    }

    /* Right after collapsing, the pointer is still on the toggle, so :hover would expand the rail at once and the
       click would look ignored. public/js/sidebar-rail.js sets this class until the pointer leaves the sidebar;
       without pointer events the sidebar is not hovered, so the rail stays narrow. */
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon.vg-sb-no-peek {
        pointer-events: none;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:not(:hover) .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-list {
        padding: 0 12px;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:not(:hover) .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link {
        justify-content: center;
        padding: 7px 0;
    }

    .page-wrapper.compact-wrapper .page-header {
        margin-left: var(--vg-sb-width);
        width: calc(100% - var(--vg-sb-width));
    }

    .page-wrapper.compact-wrapper .page-header.close_icon {
        margin-left: var(--vg-sb-rail);
        width: calc(100% - var(--vg-sb-rail));
    }

    .page-wrapper.compact-wrapper .page-body-wrapper .page-body,
    .footer {
        margin-left: var(--vg-sb-width);
    }

    .footer-fix {
        width: calc(100% - var(--vg-sb-width));
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body,
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ footer {
        margin-left: var(--vg-sb-rail);
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ .footer-fix {
        width: calc(100% - var(--vg-sb-rail));
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper,
    .page-wrapper.compact-wrapper .page-header,
    .page-wrapper.compact-wrapper .page-body-wrapper .page-body,
    .footer {
        transition: none;
    }
}

/* Collapsed rail: open section marker. The labels are hidden, so the section that holds the current page gets the
   same lighter fill as an active item (as in the mockup). */
@media (min-width: 992px) {
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:not(:hover) .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active:not(.link-nav) {
        background-color: var(--vg-sb-active);
    }
}

/* =====================================================================================
 * Element 4 - Header. The welcome text is gone; the breadcrumb lives here now (the one in the page title is
 * hidden), the search is a field, the dashboard switch and the user are compact controls. Height 60px; the page
 * body already starts below it (margin-top 56px + padding), so nothing moves.
 * ===================================================================================== */

/* ---------- Bar ---------- */
.page-wrapper .page-header .header-wrapper {
    height: var(--vg-header-h);
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 28px;
    background-color: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Riho draws an inset hairline under the bar with a positioned pseudo-element; use a plain full-width border instead. */
.page-wrapper.compact-wrapper .page-header .header-wrapper::before {
    display: none;
}

.page-wrapper .page-header .header-wrapper {
    border-bottom: 1px solid var(--vg-line);
}

/* ---------- Breadcrumb (moved here from the page title) ---------- */
.page-wrapper .page-body-wrapper .page-title .breadcrumb {
    display: none;
}

.page-wrapper .page-header .header-wrapper .left-header {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    min-width: 0;
    width: auto;
    max-width: none;
}

.page-wrapper .page-header .header-wrapper .left-header .vg-crumbs {
    min-width: 0;
}

.page-wrapper .page-header .header-wrapper .left-header .vg-crumbs .breadcrumb {
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 13px;
    white-space: nowrap;
}

.page-wrapper .page-header .header-wrapper .left-header .vg-crumbs .breadcrumb-item {
    color: var(--vg-muted);
}

.page-wrapper .page-header .header-wrapper .left-header .vg-crumbs .breadcrumb-item a {
    color: var(--vg-muted);
    text-decoration: none;
}

.page-wrapper .page-header .header-wrapper .left-header .vg-crumbs .breadcrumb-item a:hover {
    color: var(--vg-ink);
}

.page-wrapper .page-header .header-wrapper .left-header .vg-crumbs .breadcrumb-item + .breadcrumb-item::before {
    color: #CFC5BD;
}

.page-wrapper .page-header .header-wrapper .left-header .vg-crumbs .breadcrumb-item.active {
    overflow: hidden;
    color: var(--vg-ink);
    font-weight: 500;
    text-overflow: ellipsis;
}

/* ---------- Right side ---------- */
.page-wrapper .page-header .header-wrapper .nav-right {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.page-wrapper .page-header .header-wrapper .nav-right>ul {
    gap: 12px;
}

.page-wrapper .page-header .header-wrapper .nav-right>ul>li {
    padding: 0;
}

/* Search: the two Riho buttons are drawn as one white field (the click still opens the search modal). */
.page-wrapper .page-header .header-wrapper .nav-right .openSearchModal .input-group {
    flex-wrap: nowrap;
    align-items: center;
    width: 240px;
    height: 40px;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-r-ctl);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s;
}

.page-wrapper .page-header .header-wrapper .nav-right .openSearchModal .input-group:hover {
    border-color: #CFC5BD;
}

.page-wrapper .page-header .header-wrapper .nav-right .openSearchModal .btn {
    height: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-wrapper .page-header .header-wrapper .nav-right .openSearchModal .btn-outline-primary {
    width: 38px;
    padding: 0 !important;
    color: var(--vg-soft) !important;
}

.page-wrapper .page-header .header-wrapper .nav-right .openSearchModal .btn-primary {
    flex: 1;
    min-width: 0 !important;
    padding: 0 12px 0 0 !important;
    color: var(--vg-muted) !important;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
}

/* Dashboard switch (Riho draws a white 40px pill with a very specific selector, hence the class and !important). */
.page-wrapper .page-header .header-wrapper .nav-right>ul>li.vg-switch {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.page-wrapper .page-header .header-wrapper .nav-right .vg-switch .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-r-ctl);
    background: #fff;
    color: var(--vg-ink);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.page-wrapper .page-header .header-wrapper .nav-right .vg-switch .nav-link:hover {
    border-color: #CFC5BD;
    background: #FAF6F2;
}

.page-wrapper .page-header .header-wrapper .nav-right .vg-switch .nav-link i {
    color: var(--vg-muted);
    font-size: 14px;
}

/* User: initials avatar (or the user's image), name and role on one line. */
.page-wrapper .page-header .header-wrapper .nav-right ul li .profile-media {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vg-avatar {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #C3BDFF;
    color: var(--vg-ink);
    font-size: 12px;
    font-weight: 600;
}

.page-wrapper .page-header .header-wrapper .nav-right ul li .profile-media img {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    object-fit: cover;
}

@media (min-width: 1400px) {
    .page-wrapper .page-header .header-wrapper .nav-right ul li .profile-media .media-body {
        display: flex !important;
        align-items: center;
        gap: 6px;
    }
}

.page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .profile-media .media-body span {
    color: var(--vg-ink);
    font-size: 13px;
    font-weight: 600;
}

.page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .profile-media .media-body p {
    color: var(--vg-muted);
    font-size: 13px;
    line-height: 1.2;
}

.page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .profile-media .media-body p::before {
    content: "\00b7\00a0";
}

.page-wrapper .page-header .header-wrapper .nav-right .profile-media .media-body i {
    color: var(--vg-soft);
    font-size: 11px;
}

/* Profile menu: same radius, border and shadow as the rest of the new look. */
.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown {
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    width: 200px;
    padding: 6px;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-r-ctl);
    box-shadow: 0 12px 32px rgba(20, 20, 20, .12);
}

.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li {
    border-bottom: 0;
    padding: 6px !important;
}

/* ---------- Page background: white, like the mockups (Riho paints it light grey) ---------- */
.page-wrapper .page-body-wrapper {
    background-color: #fff;
}

/*
 * Page body container shared by every redesigned page (Vanguard Resumen, Alta novedades...):
 * the same maximum width and gutters everywhere. The layout's own title bar goes away because
 * these pages carry their own heading.
 */
.vg-page {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 28px 28px;
}

body:has(.vg-page) .page-body .page-title {
    display: none;
}

@media (max-width: 900px) {
    .vg-page {
        padding: 0 16px 18px;
    }
}

/*
 * Buttons inside redesigned pages (.vg-page). The markup keeps Bootstrap's own classes
 * (btn btn-primary / btn-outline-primary), so nothing has to be renamed: a page gets the
 * new look by living inside .vg-page. Small buttons (.btn-sm, e.g. the table toolbar) keep their
 * current look until their own step. Dropping the scope later makes it global.
 */
.vg-page .btn:not(.btn-sm) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--vg-ctl-height);
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    border-radius: var(--vg-r-ctl);
    box-shadow: none;
}

.vg-page .btn:not(.btn-sm) .bi {
    font-size: 14px;
    line-height: 1;
}

/* !important only because Riho paints .btn-primary with !important itself. */
.vg-page .btn-primary:not(.btn-sm),
.vg-page .btn-primary:not(.btn-sm):focus,
.vg-page .btn-primary:not(.btn-sm).disabled,
.vg-page .btn-primary:not(.btn-sm):disabled {
    background-color: var(--vg-action) !important;
    border-color: var(--vg-action) !important;
    color: var(--vg-surface);
}

.vg-page .btn-primary:not(.btn-sm):hover,
.vg-page .btn-primary:not(.btn-sm):active,
.vg-page .btn-primary:not(.btn-sm):not([disabled]):not(.disabled).active {
    background-color: var(--vg-action-hover) !important;
    border-color: var(--vg-action-hover) !important;
    color: var(--vg-surface) !important;
}

.vg-page .btn-outline-primary:not(.btn-sm),
.vg-page .btn-outline-secondary:not(.btn-sm),
.vg-page .btn-outline-primary:not(.btn-sm):focus,
.vg-page .btn-outline-secondary:not(.btn-sm):focus {
    background: var(--vg-surface);
    border-color: var(--vg-line);
    color: var(--vg-ink);
}

.vg-page .btn-outline-primary:not(.btn-sm):hover,
.vg-page .btn-outline-secondary:not(.btn-sm):hover,
.vg-page .btn-outline-primary:not(.btn-sm):active,
.vg-page .btn-outline-secondary:not(.btn-sm):active,
.vg-page .btn-outline-primary:not(.btn-sm).show,
.vg-page .btn-outline-secondary:not(.btn-sm).show {
    background: var(--vg-surface) !important;
    border-color: var(--vg-line-strong) !important;
    color: var(--vg-ink) !important;
}

.vg-page .btn:focus-visible {
    outline: 2px solid var(--vg-action) !important;
    outline-offset: 2px;
}