/*
 * 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-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: 3px;

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

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

.left-side-menu {
    background: var(--sb-bg);
}

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

#sidebar-menu .menu-title {
    color: var(--sb-title);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 14px 20px 6px;
    margin-top: 4px;
    border-top: 1px solid var(--sb-divider);
}

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

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

#sidebar-menu>ul>li>a {
    color: var(--sb-text);
    padding: 12px 20px 12px 20px;
    transition: color 0.15s ease;
}

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

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

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

/* Active row: color-only. No background, no rail, no bold — text + icon both
   shift to the accent color so the whole row reads as one signal. */
#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);
}

/* An expanded-but-not-current parent gets the lighter treatment only, so it is
   distinguishable from the page you are actually on. */
#sidebar-menu>ul>li.mm-active>a:not(.active):not([aria-current="page"]) {
    color: var(--sb-text-hover);
}

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

.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;
    transition: color 0.15s ease;
}

.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 {
    color: var(--sb-text-hover);
}

.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);
    opacity: 1;
}

/* ----------------------------------------------------------------- badges */

#sidebar-menu .badge {
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ------------------------------------------------------ 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);
}

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);
}

/* -------------------------------------------------------- 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);
    }
}