/* PeraSignage Panel UX v7.1
   Dark sidebar patch only.
   Main dashboard/content styles remain untouched.
*/

:root {
    --pera-sidebar-bg: #07111f;
    --pera-sidebar-bg-2: #0a1830;
    --pera-sidebar-line: rgba(255,255,255,.08);
    --pera-sidebar-text: #c7d2e3;
    --pera-sidebar-muted: #73849f;
    --pera-sidebar-active: #ffffff;
    --pera-sidebar-accent: #3d8cff;
}

/* Sidebar shell */
.sidebar {
    border-right-color: #101e34 !important;
    background:
        radial-gradient(circle at 35% 0%, rgba(47,118,255,.10), transparent 26%),
        linear-gradient(180deg, var(--pera-sidebar-bg) 0%, #081426 58%, #06101e 100%) !important;
    box-shadow: 8px 0 30px rgba(6,17,35,.055);
}

/* Brand */
.sidebar-brand {
    border-bottom-color: var(--pera-sidebar-line) !important;
    color: #fff !important;
}

.sidebar-brand-logo {
    filter: drop-shadow(0 6px 14px rgba(30,104,255,.22));
}

.workspace-label {
    color: #60728d !important;
}

/* Navigation */
.nav-button {
    color: var(--pera-sidebar-text) !important;
}

.nav-button .nav-icon {
    color: #8093af !important;
}

.nav-button:hover {
    background: rgba(255,255,255,.055) !important;
    color: #fff !important;
}

.nav-button:hover .nav-icon {
    color: #b9d3ff !important;
}

.nav-button.active {
    background: linear-gradient(90deg, rgba(40,120,255,.18), rgba(91,77,246,.09)) !important;
    color: var(--pera-sidebar-active) !important;
    box-shadow: inset 0 0 0 1px rgba(79,139,255,.10);
}

.nav-button.active .nav-icon {
    color: #67a4ff !important;
}

.nav-button.active::before {
    width: 3px !important;
    top: 7px !important;
    bottom: 7px !important;
    background: linear-gradient(180deg, #4ca1ff, #6856f5) !important;
    box-shadow: 0 0 13px rgba(61,140,255,.48);
}

/* License card */
.sidebar-license-card {
    border-color: rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.045) !important;
}

.sidebar-license-top span {
    color: #788ba7 !important;
}

.sidebar-license-top strong {
    color: #e8eef8 !important;
}

.sidebar-license-progress {
    background: rgba(255,255,255,.09) !important;
}

.sidebar-license-progress > span {
    background: linear-gradient(90deg, #2e91ff, #6b5cff) !important;
}

.sidebar-license-bottom {
    color: #6d7e98 !important;
}

.sidebar-license-bottom strong {
    color: #62d49a !important;
}

.sidebar-license-card.blocked {
    border-color: rgba(240,68,56,.28) !important;
    background: rgba(240,68,56,.07) !important;
}

.sidebar-license-card.blocked .sidebar-license-progress > span {
    background: #f04438 !important;
}

.sidebar-license-card.blocked .sidebar-license-bottom strong {
    color: #ff8d85 !important;
}

/* Support */
.sidebar .panel-support-link {
    border-color: rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.035) !important;
    color: #91a4bf !important;
}

.sidebar .panel-support-link:hover {
    border-color: rgba(80,145,255,.28) !important;
    background: rgba(45,116,245,.10) !important;
    color: #c5dbff !important;
}

.sidebar .panel-support-link svg {
    color: #6d9ee8 !important;
}

/* User / account footer */
.sidebar-profile {
    border-top-color: var(--pera-sidebar-line) !important;
    background: rgba(0,0,0,.06);
}

.sidebar-profile-avatar {
    background: linear-gradient(135deg, #17345f, #4057a6) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.sidebar-profile-copy strong {
    color: #e9eff8 !important;
}

.sidebar-profile-copy span {
    color: #71829c !important;
}

.sidebar-account-button:hover .sidebar-profile-copy strong {
    color: #8fc0ff !important;
}

.sidebar-logout-button {
    border-color: rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.04) !important;
    color: #8192aa !important;
}

.sidebar-logout-button:hover {
    border-color: rgba(255,94,87,.28) !important;
    background: rgba(255,77,70,.09) !important;
    color: #ff8b85 !important;
}

.sidebar-profile-chevron {
    color: #72839d !important;
}

/* Mobile drawer should stay dark too */
@media (max-width: 980px) {
    .sidebar {
        box-shadow: 18px 0 45px rgba(2,10,23,.30) !important;
    }
}