/* =============================================================================
   ADMIN SIDE MENU
   -----------------------------------------------------------------------------
   Loaded on every admin page, after assets/css/all.css and css/app.css, and is a
   PRESENTATION layer only. Every selector below targets markup that already
   exists: no route, permission gate, id, JS hook or DOM order is changed by this
   file, and no menu entry is added, renamed or removed.

   What it replaces
   ----------------
   all.css dresses the side menu as a solid block of the business theme colour
   (`.sidebar-theme { background: var(--main-color) }`) with white labels, white
   icons, translucent-white hover gradients and grey bullet dots in place of
   sub-item icons. This file restyles it as a light rail: a white surface, slate
   labels, neutral icons, and one rounded pill that carries the hover, open and
   active states.

   Selectors are deliberately written to MATCH the ones in all.css/app.css rather
   than to out-specify them with `!important` - this file simply loads later, so
   an identical selector wins. Where all.css uses a longer chain (its `:hover`
   rules, its `li.menu:first-child` sub-item rules) the same chain is repeated
   here so the two stay comparable.

   Structure this file styles (built by App\Http\AdminlteCustomPresenter):

     nav#sidebar
       .sidebar-menu-search                (optional; Business settings > System)
       .sidebar-section-label              "Main menu"
       ul.menu-categories
         li.menu > a.dropdown-toggle       top-level row
             > div  > i + span             icon + label
             > div  > i.sidemenu-right-icon chevron (dropdowns only)
           ul.submenu > li > a > i + span  sub-item row
             ul.sub-submenu ...            third / fourth level
   ============================================================================= */

/* =============================================================================
   1. TOKENS
   The accent resolves from --main-color, the token
   layouts/partials/theme_color.blade.php sets from the business's chosen theme,
   so the rail re-tints with the rest of the UI instead of pinning one brand.
   ============================================================================= */
.sidebar-wrapper {
    --sb-surface:      #ffffff;
    --sb-border:       #ebedf3;
    --sb-label:        #98a2b3;   /* "Main menu" */
    --sb-text:         #3f4557;   /* top-level label */
    --sb-text-sub:     #5c6479;   /* sub-item label */
    --sb-icon:         #858da0;
    --sb-hover:        #f4f5f9;
    --sb-accent:       var(--main-color, #3c8dbc);
    --sb-accent-soft:  color-mix(in srgb, var(--main-color, #3c8dbc) 9%, #fff);
    --sb-accent-soft2: color-mix(in srgb, var(--main-color, #3c8dbc) 14%, #fff);
    --sb-accent-ring:  color-mix(in srgb, var(--main-color, #3c8dbc) 24%, transparent);

    --sb-radius:       10px;
    --sb-gutter:       10px;      /* inset of the pills from the rail edges */
    --sb-tr:           160ms cubic-bezier(.4, 0, .2, 1);

    /* Elevation. Two layers rather than one: the tight 3px layer draws the
       contact edge - what makes the rail read as sitting ON the page rather
       than being printed onto it - and the wide, very faint layer is the cast
       shadow. A single blurred shadow at a strength you can actually see reads
       as a grey smear instead of depth. Both are offset on X only, so nothing
       spills up under the header or down past the fold, and the negative spread
       keeps each layer from washing over the one in front of it. */
    --sb-elevation:
        2px 0 3px -1px rgba(16, 24, 40, .05),
        8px 0 22px -6px rgba(16, 24, 40, .10);

    /* Same shape, deeper, for the off-canvas drawer below 992px: a panel
       floating over the whole page needs more separation than one docked
       against it. */
    --sb-elevation-drawer:
        2px 0 4px -1px rgba(16, 24, 40, .08),
        12px 0 34px -8px rgba(16, 24, 40, .22);
}

/* =============================================================================
   2. THE RAIL
   ============================================================================= */
.sidebar-theme {
    background: var(--sb-surface);
}

/* How much of the window bottom the copyright rail covers. The rail is a
   full-width fixed band at a higher z-index than this menu, so it paints over
   the menu's last stripe. The menu KEEPS its full height - that stripe is just
   white behind a white rail - but the scrolling list has to stop short of it,
   or the last item scrolls underneath the rail and cannot be reached.

   Zero by default so this file still stands on its own; the desktop block fills
   it in from --app-footer-h (css/app.css). Below 992px the menu is a full-height
   off-canvas drawer that sits OVER the rail, so nothing needs subtracting. */
.sidebar-wrapper {
    --sb-footer-gap: 0px;
}

@media (min-width: 992px) {
    .sidebar-wrapper {
        --sb-footer-gap: var(--app-footer-h, 0px);
    }
}

.sidebar-wrapper {
    /* `top` is left where all.css puts it (55px, the fixed header's height) -
       this file changes how the rail looks, not where the page hangs it. */
    border-right: 1px solid var(--sb-border);
    /* The rail is already above #content in the stack (z-index 1028 against
       content's auto), so the cast shadow falls across the page rather than
       under it. */
    box-shadow: var(--sb-elevation);
}

#sidebar {
    background: var(--sb-surface);
}

#sidebar ul.menu-categories {
    padding: 0 0 16px;
}

/* The scroll list is handed to PerfectScrollbar, which adds `.ps`. all.css then
   pushes the rail 4px OUTSIDE the sidebar (`right: -4px !important`), where the
   content area clips it. Bring it back inside and make the thumb read as a hint
   rather than a control. */
#sidebar ul.menu-categories .ps__rail-y {
    right: 2px !important;
    width: 6px;
    background: transparent !important;
}

#sidebar .ps__thumb-y {
    right: 1px;
    width: 4px;
    background-color: #d5d9e2;
    border-radius: 4px;
}

#sidebar ul.menu-categories .ps__rail-y:hover .ps__thumb-y,
#sidebar ul.menu-categories .ps__rail-y.ps--clicking .ps__thumb-y {
    width: 6px;
    background-color: #bcc2ce;
}

/* Native scrollbar, for the states where PerfectScrollbar has not attached
   (before its init, and on touch devices where it bows out). */
#sidebar ul.menu-categories {
    scrollbar-width: thin;
    scrollbar-color: #d5d9e2 transparent;
}

#sidebar ul.menu-categories::-webkit-scrollbar {
    width: 6px;
}

#sidebar ul.menu-categories::-webkit-scrollbar-thumb {
    background-color: #d5d9e2;
    border-radius: 4px;
}

/* =============================================================================
   3. SECTION LABEL  ("Main menu")
   Rendered by include/sidebar.blade.php OUTSIDE ul.menu-categories, for the same
   reason the search box is: PerfectScrollbar is bound to that list, so anything
   placed inside scrolls away with the menu.
   ============================================================================= */
#sidebar .sidebar-section-label {
    box-sizing: border-box;
    padding: 16px 20px 6px;
    color: var(--sb-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

/* The label is a fixed 33px of chrome above the scroll list, so the list's
   viewport-relative height has to give it back - otherwise the last menu item
   is pushed below the fold and can never be scrolled to. Mirrors the correction
   css/app.css already makes for the optional search box. */
#sidebar ul.menu-categories {
    height: calc(100vh - 127px - 33px - var(--sb-footer-gap)) !important;
}

#sidebar ul.menu-categories.ps {
    height: calc(100vh - 63px - 33px - var(--sb-footer-gap)) !important;
}

#sidebar.has-menu-search ul.menu-categories {
    height: calc(100vh - 127px - 46px - 33px - var(--sb-footer-gap)) !important;
}

#sidebar.has-menu-search ul.menu-categories.ps {
    height: calc(100vh - 63px - 46px - 33px - var(--sb-footer-gap)) !important;
}

/* all.css re-pins the list below 992px, where the rail is a full-height drawer
   rather than a column under the header. */
@media (max-width: 991px) {
    #sidebar ul.menu-categories.ps {
        height: calc(100vh - 10px - 33px) !important;
    }

    #sidebar.has-menu-search ul.menu-categories.ps {
        height: calc(100vh - 10px - 46px - 33px) !important;
    }
}

/* =============================================================================
   4. TOP-LEVEL ROWS
   Both kinds of top-level entry carry `.dropdown-toggle` (the presenter gives a
   plain link the same wrapper as a dropdown, minus the chevron), so one rule
   covers "Dashboard" and "Contacts" alike.
   ============================================================================= */
#sidebar ul.menu-categories li.menu > .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    margin: 1px var(--sb-gutter);
    padding: 10px 12px;
    border-radius: var(--sb-radius);
    color: var(--sb-text);
    font-size: 13.5px;
    font-weight: 500;
    /* all.css spaces every label by 1px, which at this size reads as a gap
       between the letters rather than as emphasis. */
    letter-spacing: 0;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color var(--sb-tr), color var(--sb-tr);
}

/* The icon + label half of the row. */
#sidebar ul.menu-categories li.menu > .dropdown-toggle > div {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: center;
    min-width: 0;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle i {
    flex: 0 0 auto;
    width: 22px;
    color: var(--sb-icon);
    font-size: 19px;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    transition: color var(--sb-tr);
}

/* `#sidebar * { overflow: hidden; white-space: nowrap }` in all.css clips a long
   module name flush against the rail edge with no indication anything was cut -
   "Wastage Management" simply ended mid-word. An ellipsis says so. The label has
   to be allowed to shrink for that to bite, hence min-width on the flex chain
   above and here. */
#sidebar ul.menu-categories li.menu > .dropdown-toggle > div > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* all.css lifts the first row by 21px to clear a brand block that this build
   does not render inside the sidebar; the section label now occupies that
   space. */
#sidebar ul.menu-categories li.menu:first-child > .dropdown-toggle {
    margin-top: 1px;
}

#sidebar.has-menu-search ul.menu-categories li.menu:first-child > .dropdown-toggle {
    margin-top: 1px;
}

/* --- Chevron ------------------------------------------------------------- */
/* `div + div`, not `div:last-child`: a top-level entry with no children is
   rendered with a single <div> (the presenter only emits the second one for a
   dropdown), and `:last-child` would then pin the LABEL wrapper at its natural
   width - which stops it shrinking, and with it the ellipsis above. */
#sidebar ul.menu-categories li.menu > .dropdown-toggle > div + div {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle i.sidemenu-right-icon {
    width: auto;
    margin-right: 0;
    color: #b0b7c5;
    font-size: 12px;
    transition: transform var(--sb-tr), color var(--sb-tr);
}

/* --- Hover --------------------------------------------------------------- */
/* Both selectors repeated from all.css: the first is the more specific of the
   two there, so leaving it out would let its gradient survive. */
#sidebar
    ul.menu-categories
    li.menu
    > .dropdown-toggle.dropdown-toggle:not([data-active="true"]):not(
        [aria-expanded="true"]
    ):hover,
#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover {
    background-image: none;
    background-color: var(--sb-hover);
    box-shadow: none;
    color: var(--sb-text);
    transition: background-color var(--sb-tr), color var(--sb-tr);
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover i {
    color: var(--sb-accent);
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover i.sidemenu-right-icon {
    color: #8b93a3;
}

/* --- Open (a dropdown expanded, but not the current page) ----------------- */
#sidebar
    ul.menu-categories
    li.menu
    > .dropdown-toggle[aria-expanded="true"]:not([data-active="true"]) {
    background-image: none;
    background-color: var(--sb-accent-soft);
    box-shadow: none;
    color: var(--sb-text);
}

#sidebar
    ul.menu-categories
    li.menu
    > .dropdown-toggle[aria-expanded="true"]:not([data-active="true"]) i {
    color: var(--sb-accent);
}

/* The `:hover` rule above is the one all.css writes, and it excludes an open
   row - so without this an expanded section gives no feedback under the
   pointer. */
#sidebar
    ul.menu-categories
    li.menu
    > .dropdown-toggle[aria-expanded="true"]:not([data-active="true"]):hover {
    background-color: var(--sb-accent-soft2);
}

/* --- Active (this is the section the page belongs to) --------------------- */
#sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] {
    background-image: none;
    background-color: var(--sb-accent-soft2);
    border-radius: var(--sb-radius);
    color: var(--sb-accent);
    font-weight: 600;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] i,
#sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] svg,
#sidebar
    ul.menu-categories
    li.menu
    > .dropdown-toggle[data-active="true"]:hover
    svg {
    color: var(--sb-accent);
}

/* all.css forces the label white here, which on a white rail is an invisible
   menu item. */
#sidebar
    ul.menu-categories
    li.menu
    > .dropdown-toggle[data-active="true"]
    span {
    color: var(--sb-accent);
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"]:hover {
    background-color: var(--sb-accent-soft2);
}

/* --- Keyboard ------------------------------------------------------------- */
/* An INSET ring, not an outline or an outer shadow: all.css puts
   `overflow: hidden` on every element in the rail, so anything drawn outside a
   row's own box is clipped away by the <li> around it and the focused item
   would look no different from the rest. */
#sidebar ul.menu-categories li.menu > .dropdown-toggle:focus-visible,
#sidebar ul.menu-categories ul.submenu > li a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--sb-accent-ring);
}

/* =============================================================================
   5. SUB-ITEMS (level 2)
   The presenter renders each one as `<a> <i> <span>label</span> </a>`. all.css
   laid these out with `justify-content: space-between`, which with two children
   throws the label at the far edge of the rail, and drew a grey bullet dot in
   `a:before` in place of the item's own icon.
   ============================================================================= */
#sidebar ul.menu-categories ul.submenu {
    padding: 0 0 4px;
}

#sidebar ul.menu-categories ul.submenu > li a,
#sidebar ul.menu-categories li.menu:first-child ul.submenu > li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    /* Aligned so a sub-item's icon sits one step in from its parent's icon:
       parent pill inset (10) + pill padding (12) + icon box (22) + gap (12)
       lands the parent LABEL at 56px, and the sub-item icon starts at 34px.
       The left padding (12 pad + 19 icon + 12 gap) holds that icon column open
       from the row itself rather than from the icon's own width, so a sub-item
       that registered no icon still lines its label up with the rest. */
    margin: 1px var(--sb-gutter) 1px 24px;
    padding: 8px 12px 8px 43px;
    border-radius: var(--sb-radius);
    color: var(--sb-text-sub);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    transition: background-color var(--sb-tr), color var(--sb-tr);
}

/* Taken out of the flow and dropped into the column the padding above reserves,
   so it stays on the same vertical whatever the label does - and stays centred
   against a label that has wrapped onto a second line. */
#sidebar ul.menu-categories ul.submenu > li a i,
#sidebar ul.menu-categories li.menu:first-child ul.submenu > li a i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    margin-right: 0;
    color: var(--sb-icon);
    font-size: 16px;
    line-height: 1;
    text-align: center;
    transition: color var(--sb-tr);
}

/* A long label wraps rather than being clipped. css/app.css already lifts
   all.css's blanket `#sidebar * { overflow: hidden; white-space: nowrap }` for
   the link itself, but that rule matches the <span> inside it directly, so it
   has to be lifted here too - otherwise "Import Sales Commission Agents" is cut
   at the rail edge instead of running onto a second line. */
#sidebar ul.menu-categories ul.submenu > li a span {
    min-width: 0;
    overflow: visible;
    overflow-wrap: break-word;
    white-space: normal;
}

/* The bullet dot every sub-item used to carry instead of its own icon - drawn
   in four places in all.css, plus the active/hover recolours. */
#sidebar ul.menu-categories li.menu ul.submenu > li a:before,
#sidebar ul.menu-categories li.menu ul.submenu li ul.sub-submenu li a:before,
#sidebar ul.menu-categories ul.submenu li > [data-active="true"]:before,
#sidebar
    ul.menu-categories
    li.menu
    ul.submenu
    li.active
    ul.sub-submenu
    li.active
    a:before {
    content: none;
    display: none;
}

#sidebar ul.menu-categories ul.submenu > li a:hover {
    background-color: var(--sb-hover);
    color: var(--sb-text);
}

#sidebar ul.menu-categories ul.submenu > li a:hover i {
    color: var(--sb-accent);
}

/* Active sub-item. The four selectors are the ones all.css and css/app.css use
   between them: `li.active > a` and `a[data-active="true"]`, at both levels. */
#sidebar ul.menu-categories ul.submenu > li.active > a,
#sidebar ul.menu-categories ul.submenu > li > a[data-active="true"],
#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li.active > a,
#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li > a[data-active="true"],
#sidebar ul.menu-categories ul.submenu > li.active a {
    background-image: none;
    background-color: var(--sb-accent-soft2);
    border-radius: var(--sb-radius);
    color: var(--sb-accent);
    font-weight: 600;
}

#sidebar ul.menu-categories ul.submenu > li.active > a i,
#sidebar ul.menu-categories ul.submenu > li > a[data-active="true"] i,
#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li.active > a i,
#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li > a[data-active="true"] i {
    color: var(--sb-accent);
}

/* =============================================================================
   6. DEEPER LEVELS (3 and 4)
   Same row, one indent step further in each time.
   ============================================================================= */
#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li a {
    position: relative;
    margin: 1px var(--sb-gutter) 1px 40px;
    padding: 7px 12px 7px 43px;
    color: var(--sb-text-sub);
    font-size: 12.5px;
    font-weight: 400;
}

#sidebar ul.menu-categories ul.submenu > li ul.sub-sub-submenu > li a {
    position: relative;
    margin: 1px var(--sb-gutter) 1px 56px;
    padding: 7px 12px 7px 43px;
    color: var(--sb-text-sub);
    font-size: 12.5px;
}

/* =============================================================================
   7. BADGES
   ============================================================================= */
#sidebar ul.menu-categories .menu-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
}

/* =============================================================================
   8. SEARCH BOX  (Business settings > System > "Enable side menu search bar")
   css/app.css styles this as white-on-translucent-white for the themed rail,
   which on a white surface is white text in an invisible box.
   ============================================================================= */
/* The box's 46px height (css/app.css) is load-bearing: it is the 46px every
   `.has-menu-search` height calculation above subtracts. Only the skin changes
   here - 8px top + the 32px input below + 6px bottom still comes to 46. */
#sidebar .sidebar-menu-search-box {
    background-color: #f4f5f9;
    border: 1px solid var(--sb-border);
    border-radius: 8px;
}

#sidebar .sidebar-menu-search-box:hover {
    background-color: #eef0f5;
}

#sidebar .sidebar-menu-search-box:focus-within {
    background-color: #fff;
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px var(--sb-accent-ring);
}

#sidebar .sidebar-menu-search-box .sidebar-menu-search-icon {
    color: #98a2b3;
}

#sidebar .sidebar-menu-search input {
    height: 32px;
    color: var(--sb-text);
    font-size: 13px;
    letter-spacing: 0;
}

#sidebar .sidebar-menu-search input::placeholder {
    color: #a3abba;
}

#sidebar .sidebar-menu-search-clear {
    color: #98a2b3;
}

#sidebar .sidebar-menu-search-clear:hover {
    color: var(--sb-text);
}

#sidebar .sidebar-menu-search-empty {
    padding: 4px 20px 8px;
    color: #98a2b3;
    font-size: 12.5px;
}

/* =============================================================================
   9. RESPONSIVE
   Below 992px all.css turns the rail into a 255px off-canvas drawer over a
   full-page overlay. It keeps its own geometry; only the surface needs saying
   again, plus the deeper elevation a floating panel needs (the 1px border is
   dropped there - once the rail is not docked against the page, the shadow is
   what separates it).
   ============================================================================= */
@media (max-width: 991px) {
    .sidebar-wrapper {
        top: 0;
        border-right: 0;
        box-shadow: var(--sb-elevation-drawer);
    }

    /* Closed, the drawer is parked off-screen at left:-52px with width:0 - its
       shadow would otherwise still bleed down the left edge of the page. */
    .main-container:not(.sbar-open) .sidebar-wrapper {
        box-shadow: none;
    }

    #sidebar .sidebar-section-label {
        padding-top: 12px;
    }

    /* Touch targets: 44px minimum on a device that is driven by a thumb. */
    #sidebar ul.menu-categories li.menu > .dropdown-toggle {
        min-height: 44px;
        font-size: 14px;
    }

    #sidebar ul.menu-categories ul.submenu > li a,
    #sidebar ul.menu-categories li.menu:first-child ul.submenu > li a {
        min-height: 40px;
        font-size: 13.5px;
    }
}

/* Desktop: the rail is 235px wide (all.css `.sidebar-wrapper`) but #content is
   held off by 222px, so the last 13px of every page ran underneath it - the rail
   is fixed and paints over the content. */
@media (min-width: 992px) {
    .main-container > #content,
    #content {
        margin-left: 235px;
    }

    .sidebar-closed > #content {
        margin-left: 0;
    }
}

/* =============================================================================
   10. DARK MODE
   `.darkmode` on <body> (all.css ships ~500 rules behind it). Mirrors the rail
   so it does not stay a white slab on a dark page.
   ============================================================================= */
.darkmode .sidebar-theme,
.darkmode #sidebar {
    background: #1a2e4e;
}

.darkmode .sidebar-wrapper {
    /* A 10%-black shadow is invisible on a dark page; depth there has to come
       from a denser one. */
    --sb-elevation:
        2px 0 3px -1px rgba(0, 0, 0, .28),
        10px 0 26px -6px rgba(0, 0, 0, .42);
    --sb-elevation-drawer:
        2px 0 4px -1px rgba(0, 0, 0, .34),
        14px 0 38px -8px rgba(0, 0, 0, .55);

    --sb-surface:  #1a2e4e;
    --sb-border:   #24395c;
    --sb-label:    #7f8eaa;
    --sb-text:     #e0e6ed;
    --sb-text-sub: #b5c0d3;
    --sb-icon:     #93a1bb;
    --sb-hover:    rgba(255, 255, 255, .07);
    --sb-accent-soft:  rgba(255, 255, 255, .10);
    --sb-accent-soft2: rgba(255, 255, 255, .15);
}

.darkmode #sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"],
.darkmode #sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] span,
.darkmode #sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] i,
.darkmode #sidebar ul.menu-categories ul.submenu > li.active > a,
.darkmode #sidebar ul.menu-categories ul.submenu > li > a[data-active="true"] {
    color: #fff;
}

.darkmode #sidebar .ps__thumb-y {
    background-color: #3c5178;
}

.darkmode #sidebar .sidebar-menu-search-box {
    background-color: rgba(255, 255, 255, .07);
}

.darkmode #sidebar .sidebar-menu-search-box:focus-within {
    background-color: rgba(255, 255, 255, .12);
}

/* =============================================================================
   11. MOTION / PRINT
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    #sidebar ul.menu-categories li.menu > .dropdown-toggle,
    #sidebar ul.menu-categories li.menu > .dropdown-toggle i,
    #sidebar ul.menu-categories ul.submenu > li a {
        transition: none;
    }
}

@media print {
    .sidebar-wrapper {
        display: none !important;
    }
}