/*
 * SRMS Sidebar Theme
 * ------------------
 * Refined dark-navy palette for .left-side-menu. Loaded AFTER app.min.css so it
 * overrides the stock Velonic/Ubold sidebar rules without editing the vendor file.
 *
 * Why a separate file: assets/css/app.css and assets/css/app.min.css have drifted
 * apart (head.php serves app.min.css), so editing either one in place is unreliable.
 * This mirrors the existing icon-aliases.css / library-module-theme.css pattern.
 *
 * Contrast (WCAG AA needs 4.5:1 for normal text):
 *   --sb-text   #94a3b8 on #1a2942 -> 5.69:1  PASS  (was #70809a -> 3.64:1 FAIL)
 *   --sb-title  #8593a8 on #1a2942 -> 4.68:1  PASS
 *   --sb-accent #3bc0c3 on #1a2942 -> 6.61:1  PASS
 */

:root {
    --sb-bg: #1a2942;
    --sb-bg-sunken: #16243a;
    /* flyout / collapsed submenu */

    --sb-text: #94a3b8;
    --sb-text-hover: #e2e8f0;
    --sb-text-hover-light: #b8c2d0;
    --sb-text-active: #ffffff;
    --sb-title: #8593a8;

    --sb-hover-bg: rgba(148, 163, 184, 0.06);
    --sb-active-bg: rgba(59, 192, 195, 0.08);

    --sb-accent: #3bc0c3;
    --sb-rail: 2px;

    --sb-divider: rgba(148, 163, 184, 0.14);
    --sb-focus: rgba(59, 192, 195, 0.55);
}

/* ---------------------------------------------------------------- surface */

.left-side-menu {
    background: var(--sb-bg);
    /* Deliberate 1px hairline instead of a hard color edge against the
       pale-grey content surface. Uses the same divider colour as the
       menu's internal separators for cohesion. */
    border-right: 1px solid var(--sb-divider);
    /* Scroll fallback. The theme normally scrolls the menu through slimScroll
       (app.min.js), but a handful of views never load that bundle, and there
       the fixed-height panel simply clipped everything below the fold with no
       way to reach it. Harmless when slimScroll is active: it constrains its
       own wrapper, so this container never overflows. */
    overflow-y: auto;
}

/* ------------------------------------------------------------ group label */

#sidebar-menu .menu-title {
    color: var(--sb-title);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 18px 22px 6px;
    margin-top: 6px;
}

/* The first group label sits directly under the topbar. */
#sidebar-menu>ul>li.menu-title:first-child {
    margin-top: 0;
    padding-top: 12px;
}

/* -------------------------------------------------------- top-level items */

#sidebar-menu>ul>li>a {
    color: var(--sb-text);
    padding: 13px 22px 13px 22px;
    line-height: 1.4;
    font-size: 13px;
    transition: color 0.15s ease;
}

#sidebar-menu>ul>li>a i {
    color: var(--sb-text);
    opacity: 0.8;
    transition: color 0.15s ease, opacity 0.15s ease;
}

/* Very light hover — subtle brighten, not jarring. */
#sidebar-menu>ul>li>a:hover,
#sidebar-menu>ul>li>a:focus,
#sidebar-menu>ul>li>a:active,
.left-side-menu .metismenu a:hover,
.left-side-menu .metismenu a:hover>span {
    color: var(--sb-text-hover-light) !important;
}

.left-side-menu .metismenu a:hover>i {
    color: var(--sb-text-hover-light) !important;
    opacity: 1;
}

#sidebar-menu>ul>li>a:hover i,
#sidebar-menu>ul>li>a:focus i {
    color: var(--sb-text-hover-light);
    opacity: 1;
}

/* Active row: accent color only. No rail, no background. */
#sidebar-menu>ul>li>a.active,
#sidebar-menu>ul>li.mm-active>a,
#sidebar-menu>ul>li>a[aria-current="page"] {
    color: var(--sb-accent);
}

#sidebar-menu>ul>li>a.active i,
#sidebar-menu>ul>li.mm-active>a i,
#sidebar-menu>ul>li>a[aria-current="page"] i {
    color: var(--sb-accent);
    opacity: 1;
}

/* An expanded-but-not-current parent stays the same color. */
#sidebar-menu>ul>li.mm-active>a:not(.active):not([aria-current="page"]) {
    color: var(--sb-text);
}

/* -------------------------------------------------------------- sub-items */

/* Expanded submenu: small indent, no guide line. */
.left-side-menu .nav-second-level,
.left-side-menu .nav-third-level,
.left-side-menu .nav-thrid-level {
    margin-left: 12px;
}

.left-side-menu .nav-second-level li a,
.left-side-menu .nav-third-level li a,
.left-side-menu .nav-thrid-level li a {
    /* .nav-thrid-level is the vendor's typo; both spellings exist in the markup. */
    color: var(--sb-text);
    padding: 8px 20px 8px 14px;
    font-size: 12px;
    transition: color 0.15s ease;
}

/* Very light hover on sub-items too. */
.left-side-menu .nav-second-level li a:hover,
.left-side-menu .nav-second-level li a:focus,
.left-side-menu .nav-third-level li a:hover,
.left-side-menu .nav-third-level li a:focus,
.left-side-menu .nav-thrid-level li a:hover,
.left-side-menu .nav-thrid-level li a:focus,
.left-side-menu .metismenu .nav-second-level a:hover,
.left-side-menu .metismenu .nav-third-level a:hover {
    color: var(--sb-text-hover-light) !important;
}

.left-side-menu .nav-second-level li a.active,
.left-side-menu .nav-second-level li.mm-active>a,
.left-side-menu .nav-third-level li a.active,
.left-side-menu .nav-third-level li.mm-active>a,
.left-side-menu .nav-thrid-level li a.active,
.left-side-menu .nav-thrid-level li.mm-active>a,
.left-side-menu .nav-second-level li a[aria-current="page"],
.left-side-menu .nav-third-level li a[aria-current="page"] {
    color: var(--sb-accent);
}

/* ---------------------------------------------------------------- chevron */

#sidebar-menu .menu-arrow {
    color: var(--sb-text);
    opacity: 0.65;
}

#sidebar-menu>ul>li>a:hover>.menu-arrow,
#sidebar-menu li.mm-active>a>.menu-arrow,
#sidebar-menu li.mm-open>a>.menu-arrow {
    color: var(--sb-text-hover-light);
    opacity: 1;
}

/* ----------------------------------------------------------------- badges
   Soft dots instead of loud red pills — signals "needs attention" without
   shouting. Works with the existing badge-danger markup in the sidebar. */

#sidebar-menu .badge.badge-danger {
    width: 8px;
    height: 8px;
    padding: 0;
    min-width: 0;
    font-size: 0;
    line-height: 0;
    background: #f87171;
    border: none;
    border-radius: 50%;
    float: none;
    margin: 0 0 0 8px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* Canteen uses badge-pill variant — same dot treatment. */
#sidebar-menu .badge.badge-danger.badge-pill {
    width: 8px;
    height: 8px;
    padding: 0;
    min-width: 0;
    font-size: 0;
    line-height: 0;
    border-radius: 50%;
}

/* ------------------------------------------------------ keyboard focus ring
   The stock theme has no visible focus state at all. :focus-visible keeps the
   ring off mouse clicks. */

#sidebar-menu a:focus-visible,
.left-side-menu a:focus-visible {
    outline: 2px solid var(--sb-focus);
    outline-offset: -2px;
    border-radius: 2px;
}

/* ------------------------------------------------- collapsed (body.enlarged)
   Flyout panels sit on top of page content, so they need their own surface. */

/* The stock collapsed rule re-declares `padding: 15px 20px`; with the rail gone
   we no longer need to trim the left padding, so let stock centering stand. */
body.enlarged .left-side-menu #sidebar-menu>ul>li:hover>a {
    color: var(--sb-text-hover-light);
}

body.enlarged .left-side-menu #sidebar-menu>ul>li>ul {
    background-color: var(--sb-bg-sunken);
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.55);
}

body.enlarged .left-side-menu #sidebar-menu>ul>li>ul a:hover {
    color: var(--sb-text-hover-light);
}

/* -------------------------------------------------------- mobile backdrop
   Layer only; the open/close class toggling stays with the stock app.js. */

@media (max-width: 767.98px) {
    .left-side-menu {
        box-shadow: 0 0 40px -6px rgba(15, 23, 42, 0.6);
    }
}