/* ==============================================================================================================================
   [ ROLEAGORA SIDEBAR ]
   Hides the FEX lateral sidebar and applies a dark theme to the top bar.
   The custom bottom navigation is defined in App.css.
   ============================================================================================================================== */

/* ── Hide lateral sidebar and toggle ─────────────────────────── */

body.roleagora-public-layout #sidebar {
    display: none !important;
}

/* Higher specificity needed to beat FEX's #sidebar-top .btn-icon.icon rule */
body.roleagora-public-layout #sidebar-top #sidebar-toggle {
    display: none !important;
}

/* ── Dark top bar ─────────────────────────────────────────────── */

body.roleagora-public-layout #sidebar-top {
    background: rgba(11, 12, 17, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
    /* No backdrop-filter: it creates a stacking context that breaks fixed dropdown positioning */
}

body.roleagora-public-layout .sidebar-top-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

body.roleagora-public-layout .top-module {
    color: rgba(240, 242, 245, 0.9);
    font-weight: 700;
}

body.roleagora-public-layout .top-module .material-symbols-outlined {
    color: #a855f7;
}

body.roleagora-public-layout .topbar-separator {
    background: rgba(255, 255, 255, 0.15);
}

body.roleagora-public-layout #sidebar-top .btn-icon.icon {
    color: rgba(255, 255, 255, 0.8);
}

body.roleagora-public-layout #sidebar-top .btn-icon.icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.roleagora-public-layout #user-name {
    color: #fff;
}

body.roleagora-public-layout .profile-role {
    color: rgba(255, 255, 255, 0.6);
}

body.roleagora-public-layout #sidebar-top .user-photo {
    border-color: rgba(255, 255, 255, 0.45);
}