/* =========================================================================
   KPN branded sidebar — burgundy background with gold active state.
   Used together with data-sidebar="dark" (set in partials/main.php): the
   template's dark theme handles the light text / icon colours, and this file
   simply recolours the surface to KPN burgundy and the active item to gold.
   ========================================================================= */
:root {
    --kpn-burgundy: #7c1c2c;
    --kpn-burgundy-dark: #5b111d;
    --kpn-gold: #ffc914;
}

/* Sidebar surface → burgundy */
.app-menu {
    background: linear-gradient(180deg, var(--kpn-burgundy-dark) 0%, var(--kpn-burgundy) 55%) !important;
    border-right-color: rgba(0, 0, 0, .2) !important;
}

/* Logo header — white pill so the maroon KPN logo stays legible on burgundy */
.app-menu .h-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}
.app-menu .h-header img {
    background: #fff;
    border-radius: 8px;
    padding: 4px 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

/* Brighter menu text for clean contrast on burgundy (text only — not icons) */
.app-menu li > a:not(.active),
.app-menu li > a:not(.active) span { color: rgba(255, 255, 255, .86) !important; }
.app-menu .menu-title { color: rgba(255, 255, 255, .5) !important; }

/* Softer, on-tone hover instead of the default dark-grey hover */
.app-menu li > a:hover {
    background: rgba(255, 255, 255, .10) !important;
}
.app-menu li > a:hover span { color: #fff !important; }

/* Active page → gold pill with dark-burgundy text/icon */
.app-menu a.active {
    background: var(--kpn-gold) !important;
    border-radius: 6px;
}
.app-menu a.active,
.app-menu a.active span,
.app-menu a.active svg { color: var(--kpn-burgundy-dark) !important; }
.app-menu a.active svg { fill: var(--kpn-burgundy-dark) !important; }
.app-menu a.active::before { background: var(--kpn-burgundy-dark) !important; }

/* Collapsed (icon-only) sidebar flyout keeps the burgundy surface */
.app-menu .group-hover\/sm\:block { background: var(--kpn-burgundy) !important; }