/* T-316: logged-in sidebar. Colours follow the business theme (Business Settings > System > Theme colour) through the --sb-* variables below. */
.main-sidebar .sidebar { padding-bottom: 24px; }
/* the header already shows the business name; the sidebar copy stays hidden (AdminLTE default) */
.main-sidebar .sidebar > .logo { display: none !important; }
.main-sidebar .sidebar { padding-top: 10px; }

.slip-menu-search { position: relative; margin: 4px 12px 10px; }
.slip-menu-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .6; }
.slip-menu-search input { width: 100%; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #fff; padding: 0 10px 0 30px; font-size: 13px; outline: none; }
.slip-menu-search input::placeholder { color: rgba(255,255,255,.5); }
.slip-menu-search input:focus { border-color: #14b8a6; background: rgba(255,255,255,.12); }
.sidebar-collapse .slip-menu-search { display: none; }

.sidebar-menu > li.header { font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; padding: 16px 18px 6px !important; }
.sidebar-menu > li.header:first-child { padding-top: 6px !important; }
.sidebar-menu > li > a { margin: 1px 10px; border-radius: 9px; padding: 9px 12px !important; border-left: 0 !important; position: relative; transition: background .12s; }
.sidebar-menu > li > a > .fa, .sidebar-menu > li > a > .fas, .sidebar-menu > li > a > i:first-child { width: 22px; text-align: center; margin-right: 4px; }
.sidebar-menu > li.active > a:before, .sidebar-menu > li.menu-open > a:before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #14b8a6; }
.sidebar-menu .treeview-menu { margin: 2px 10px 6px 22px !important; padding: 2px 0 !important; border-left: 1px solid rgba(255,255,255,.10); background: transparent !important; }
.sidebar-menu .treeview-menu > li > a { border-radius: 7px; padding: 6px 10px 6px 12px !important; font-size: 13px; }
.sidebar-menu .treeview-menu > li.active > a { font-weight: 700; }
.sidebar-menu .treeview-menu > li.active > a > .fa:first-child, .sidebar-menu .treeview-menu > li.active > a > i:first-child { color: #14b8a6; }
.sidebar-menu .treeview-menu .treeview-menu { margin-left: 12px !important; }
.slip-menu-empty { padding: 10px 22px; font-size: 12.5px; opacity: .7; }

/* colours per theme. Dark themes: sidebar tinted with the theme colour. Light themes: white sidebar. Accent = theme colour. */
body { --sb-bg: #0b1f3a; --sb-sub: rgba(255,255,255,.04); --sb-hover: rgba(255,255,255,.07); --sb-active: rgba(255,255,255,.11); --sb-text: #d3dceb; --sb-strong: #ffffff; --sb-muted: #7f93ad; --sb-line: rgba(255,255,255,.10); --sb-accent: #14b8a6; --sb-input: rgba(255,255,255,.07); --sb-input-line: rgba(255,255,255,.14); --sb-hit: rgba(20,184,166,.20); }
body.skin-black  { --sb-bg: #111827; --sb-accent: #e5e7eb; --sb-hit: rgba(229,231,235,.14); }
body.skin-purple { --sb-bg: #221d47; --sb-accent: #a5a1f0; --sb-hit: rgba(165,161,240,.20); }
body.skin-green  { --sb-bg: #0b2e22; --sb-accent: #34d399; --sb-hit: rgba(52,211,153,.20); }
body.skin-red    { --sb-bg: #3b1117; --sb-accent: #fb7185; --sb-hit: rgba(251,113,133,.20); }
body.skin-yellow { --sb-bg: #33240a; --sb-accent: #fbbf24; --sb-hit: rgba(251,191,36,.20); }
body.skin-blue-light, body.skin-black-light, body.skin-purple-light, body.skin-green-light, body.skin-red-light, body.skin-yellow-light {
    --sb-bg: #ffffff; --sb-sub: transparent; --sb-hover: #f1f5f9; --sb-active: #eef2f7; --sb-text: #334155; --sb-strong: #0b1f3a; --sb-muted: #94a3b8; --sb-line: #e2e8f0; --sb-input: #f1f5f9; --sb-input-line: #e2e8f0; }
body.skin-blue-light   { --sb-accent: #0f766e; --sb-hit: rgba(15,118,110,.12); }
body.skin-black-light  { --sb-accent: #111827; --sb-hit: rgba(17,24,39,.08); }
body.skin-purple-light { --sb-accent: #605ca8; --sb-hit: rgba(96,92,168,.14); }
body.skin-green-light  { --sb-accent: #00a65a; --sb-hit: rgba(0,166,90,.14); }
body.skin-red-light    { --sb-accent: #dd4b39; --sb-hit: rgba(221,75,57,.12); }
body.skin-yellow-light { --sb-accent: #d97706; --sb-hit: rgba(217,119,6,.14); }

html body[class] .main-sidebar, html body[class] .left-side { background: var(--sb-bg) !important; }
body.skin-blue-light .main-sidebar, body.skin-black-light .main-sidebar, body.skin-purple-light .main-sidebar, body.skin-green-light .main-sidebar, body.skin-red-light .main-sidebar, body.skin-yellow-light .main-sidebar { border-right: 1px solid #e2e8f0 !important; }
html body[class] .sidebar-menu > li.header { background: transparent !important; color: var(--sb-muted) !important; }
html body[class] .sidebar-menu > li > a, html body[class] .sidebar a { color: var(--sb-text) !important; }
html body[class] .sidebar-menu > li:hover > a { background: var(--sb-hover) !important; color: var(--sb-strong) !important; }
html body[class] .sidebar-menu > li.active > a, html body[class] .sidebar-menu > li.menu-open > a { background: var(--sb-active) !important; color: var(--sb-strong) !important; }
html body[class] .sidebar-menu > li.active > a:before, html body[class] .sidebar-menu > li.menu-open > a:before { background: var(--sb-accent); }
html body[class] .sidebar-menu .treeview-menu { background: var(--sb-sub) !important; border-left-color: var(--sb-line); }
html body[class] .sidebar-menu .treeview-menu > li > a { color: var(--sb-text) !important; opacity: .9; }
html body[class] .sidebar-menu .treeview-menu > li > a:hover { background: var(--sb-hover) !important; color: var(--sb-strong) !important; opacity: 1; }
html body[class] .sidebar-menu .treeview-menu > li.active > a { color: var(--sb-strong) !important; opacity: 1; }
html body[class] .sidebar-menu .treeview-menu > li.active > a > .fa:first-child, html body[class] .sidebar-menu .treeview-menu > li.active > a > i:first-child { color: var(--sb-accent); }
html body[class] .sidebar-menu li.slip-hit > a { background: var(--sb-hit) !important; }
.slip-menu-search i { color: var(--sb-muted); opacity: 1; }
.slip-menu-search input { background: var(--sb-input); border-color: var(--sb-input-line); color: var(--sb-strong); }
.slip-menu-search input::placeholder { color: var(--sb-muted); }
.slip-menu-search input:focus { border-color: var(--sb-accent); }
.slip-menu-empty { color: var(--sb-muted); }

/* collapsed (mini) sidebar: no headers, centred icons */
.sidebar-mini.sidebar-collapse .sidebar-menu > li.header { display: none; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a { margin: 1px 4px; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a:before { left: -4px; }

/* long menus scroll inside the sidebar on desktop */
@media (min-width: 768px) {
    .fixed .main-sidebar .sidebar { max-height: calc(100vh - 50px); overflow-y: auto; }
}