.side-nav {
    position:fixed;top:0;left:0;height:100vh;width:220px;
    background:linear-gradient(180deg,#151515 0%,#0d0d0d 100%);
    border-right:1px solid #252525;
    z-index:1000;
    display:flex;flex-direction:column;
    transition:width 0.25s ease;
    overflow:hidden;
}
.side-nav.collapsed { width:56px; }
.side-nav-body {
    flex:1;display:flex;flex-direction:column;overflow:hidden;
    padding:6px;
}
.side-logo {
    display:flex;align-items:center;gap:10px;
    padding:14px 10px 18px;flex-shrink:0;overflow:hidden;
}
.side-logo img { height:30px;width:30px;flex-shrink:0; }
.side-logo-text {
    color:#ff8c00;font-size:14px;font-weight:700;
    text-transform:uppercase;letter-spacing:1px;
    white-space:nowrap;overflow:hidden;
    transition:opacity 0.2s;
}
.collapsed .side-logo-text { opacity:0; }
.side-menu {
    display:flex;flex-direction:column;gap:1px;
    padding:0 2px;flex-shrink:0;
}
.side-item {
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;border-radius:6px;
    color:#888;font-size:13px;font-weight:500;
    text-decoration:none;transition:all 0.2s;
    white-space:nowrap;overflow:hidden;
}
.side-item i {
    width:20px;text-align:center;font-size:15px;flex-shrink:0;
}
.side-item:hover { background:#1a1a1a; color:#ccc; }
.side-item.active { background:rgba(255,140,0,0.1); color:#ff8c00; }
.side-item.active i { color:#ff8c00; }
.side-label {
    transition:opacity 0.2s;overflow:hidden;
}
.collapsed .side-label { opacity:0;width:0; }
.side-section-label {
    color:#555;font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:1px;padding:14px 10px 2px;overflow:hidden;
}
.collapsed .side-section-label { opacity:0;width:0;padding:0; }
.side-item.side-sub-item { padding-left:30px; }
.collapsed .side-item.side-sub-item { padding-left:10px; }
.side-admin { color:#e74c3c; }
.side-admin i { color:#e74c3c; }
.side-admin:hover { background:rgba(231,76,60,0.1);color:#e74c3c; }
.side-admin.active { background:rgba(231,76,60,0.15); }
.side-admin.active i { color:#e74c3c; }
.side-spacer { flex:1; }
.side-user {
    padding:4px 2px;border-top:1px solid #1a1a1a;
    flex-shrink:0;overflow:visible;position:relative;
}
.side-user-profile {
    display:flex;align-items:center;gap:8px;
    padding:6px 8px;margin-bottom:2px;
    overflow:visible;
}
.side-avatar {
    width:28px;height:28px;border-radius:50%;border:2px solid #ff8c00;
    flex-shrink:0;object-fit:cover;
}
.side-avatar-placeholder {
    background:#222;display:flex;align-items:center;justify-content:center;
    color:#555;font-size:12px;border-color:#333;
}
.side-username {
    color:#eee;font-size:12px;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transition:opacity 0.2s;
}
.collapsed .side-username { opacity:0;width:0; }
.collapsed .side-user-profile { padding:6px 8px;margin:0 auto; }
.side-logout { color:#e74c3c; }
.side-logout:hover { background:rgba(231,76,60,0.1);color:#e74c3c; }
.side-steam-btn {
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:8px 10px;border-radius:6px;
    background:#1b2838;color:#fff;font-size:12px;font-weight:600;
    text-decoration:none;transition:background 0.2s;overflow:hidden;
}
.side-steam-btn img { height:22px;flex-shrink:0; }
.side-steam-btn:hover { background:#2a3f5a; }

.side-collapse-btn {
    background:none;border:none;border-top:1px solid #1a1a1a;
    color:#888;font-size:14px;cursor:pointer;
    padding:10px;transition:all 0.2s;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;gap:8px;
}
.side-collapse-btn:hover { background:#222; color:#ff8c00; }
.side-collapse-btn span { font-size:11px;font-weight:600;transition:opacity 0.2s;overflow:hidden; }
.collapsed .side-collapse-btn span { opacity:0;width:0; }
.collapsed .side-collapse-btn #collapse-icon { transform:rotate(180deg); }

#mainContainer { margin-left:220px; transition:margin-left 0.25s ease; }
#sideNav.collapsed ~ #mainContainer { margin-left:56px; }

/* override max-width fixo de containers herdados (inline style de paginas) */
#mainContainer .page-wrapper,
#mainContainer .appeal-container,
#mainContainer > .container {
    max-width: 1200px !important;
    width: 100%;
    box-sizing: border-box;
}

/* ========== ADMIN AREA RED THEME ========== */
.side-nav.side-admin-area {
    background: linear-gradient(180deg, #1a0808 0%, #0d0505 100%);
    border-right-color: #3a1515;
}
.side-nav.side-admin-area .side-logo-text { color: #e74c3c; }
.side-nav.side-admin-area .side-item.active {
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
}
.side-nav.side-admin-area .side-item.active i { color: #e74c3c; }
.side-nav.side-admin-area .side-item:hover { background: rgba(231,76,60,0.08); color: #e08080; }
.side-nav.side-admin-area .side-item.side-admin { color: #ff6666; }
.side-nav.side-admin-area .side-item.side-admin i { color: #ff6666; }
.side-nav.side-admin-area .side-section-label { color: #8a4040; }
.side-nav.side-admin-area .side-user { border-top-color: #2a0e0e; }
.side-nav.side-admin-area .side-avatar { border-color: #e74c3c; }
.side-nav.side-admin-area .side-avatar-placeholder { border-color: #5a2020; background: #1a0a0a; color: #8a4040; }
.side-nav.side-admin-area .side-username { color: #e0a0a0; }
.side-nav.side-admin-area .side-collapse-btn { border-top-color: #2a0e0e; color: #8a4040; }
.side-nav.side-admin-area .side-collapse-btn:hover { color: #e74c3c; background: rgba(231,76,60,0.08); }

@media (max-width: 768px) {
    .side-nav { width:56px; }
    .side-nav .side-label { opacity:0;width:0; }
    .side-nav .side-username { opacity:0;width:0; }
    .side-nav .side-logo-text { opacity:0; }
    .side-nav .side-collapse-btn span { opacity:0;width:0; }
    #mainContainer { margin-left:56px; }
    .side-notif-dropdown { display:none !important; }
}

.collapsed .side-notif-dropdown { display:none !important; }
.collapsed .side-notif-btn { display:none; }

/* ========== BADGE (inbox unread) ========== */
.side-badge {
    position:absolute; top:4px; right:6px;
    background:#e74c3c; color:#fff;
    font-size:10px; font-weight:700; line-height:1;
    min-width:16px; height:16px; padding:0 4px;
    border-radius:8px; text-align:center;
    display:flex; align-items:center; justify-content:center;
}
.side-item { position:relative; }

/* ========== NOTIFICATION BELL ========== */
.side-notif-btn {
    position:relative; background:none; border:none;
    color:#888; cursor:pointer; padding:4px 6px;
    border-radius:4px; transition:all 0.2s;
    margin-left:auto; flex-shrink:0;
}
.side-notif-btn:hover { color:#ff8c00; background:rgba(255,140,0,0.1); }
.side-notif-btn i { font-size:14px; }
.side-notif-badge {
    position:absolute; top:-2px; right:-2px;
    background:#e74c3c; color:#fff;
    font-size:9px; font-weight:700; line-height:1;
    min-width:14px; height:14px; padding:0 3px;
    border-radius:7px; text-align:center;
    display:flex; align-items:center; justify-content:center;
}

/* ========== NOTIFICATION DROPDOWN ========== */
.side-notif-dropdown {
    display:none; position:absolute; bottom:100%; left:0; right:0;
    background:#1a1a1a; border:1px solid #333; border-radius:8px;
    max-height:320px; overflow:hidden; z-index:1100;
    margin-bottom:4px; box-shadow:0 -4px 20px rgba(0,0,0,0.5);
}
.side-notif-dropdown.open { display:block; }
.notif-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-bottom:1px solid #252525;
    color:#ff8c00; font-size:12px; font-weight:700;
}
.notif-mark-all {
    background:none; border:none; color:#666; cursor:pointer;
    font-size:12px; padding:2px 6px; border-radius:4px;
    transition:all 0.2s;
}
.notif-mark-all:hover { color:#ff8c00; background:rgba(255,140,0,0.1); }
.notif-list { max-height:280px; overflow-y:auto; }
.notif-loading, .notif-empty {
    padding:20px; text-align:center; color:#555; font-size:12px;
}
.notif-item {
    display:flex; gap:8px; padding:10px 12px;
    border-bottom:1px solid #1f1f1f; transition:background 0.15s;
    cursor:pointer; text-decoration:none;
}
.notif-item:hover { background:#222; }
.notif-item.unread { background:rgba(255,140,0,0.05); }
.notif-item.unread:hover { background:rgba(255,140,0,0.1); }
.notif-icon {
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; flex-shrink:0;
}
.notif-icon.type-ban { background:rgba(231,76,60,0.15); color:#e74c3c; }
.notif-icon.type-mute { background:rgba(241,196,15,0.15); color:#f1c40f; }
.notif-icon.type-news { background:rgba(52,152,219,0.15); color:#3498db; }
.notif-icon.type-pm { background:rgba(155,89,182,0.15); color:#9b59b6; }
.notif-icon.type-site { background:rgba(46,204,113,0.15); color:#2ecc71; }
.notif-icon.type-appeal { background:rgba(230,126,34,0.15); color:#e67e22; }
.notif-icon.type-admin { background:rgba(155,89,182,0.15); color:#9b59b6; }
.notif-content { flex:1; min-width:0; }
.notif-title { color:#ddd; font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-msg { color:#777; font-size:10px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-time { color:#555; font-size:9px; margin-top:3px; }

/* ========== WELCOME POPUP ========== */
.notif-welcome-popup {
    position:fixed; top:20px; right:20px; z-index:2000;
    background:linear-gradient(135deg,#1a1a1a,#222);
    border:1px solid #ff8c00; border-radius:10px;
    padding:14px 18px; max-width:340px;
    box-shadow:0 8px 30px rgba(255,140,0,0.15), 0 4px 12px rgba(0,0,0,0.4);
    animation:notifSlideIn 0.4s ease;
}
.notif-welcome-header {
    display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.notif-welcome-header i { color:#ff8c00; font-size:16px; }
.notif-welcome-header span { color:#ff8c00; font-size:12px; font-weight:700; }
.notif-welcome-close {
    margin-left:auto; background:none; border:none;
    color:#666; cursor:pointer; font-size:14px; padding:2px;
    transition:color 0.2s;
}
.notif-welcome-close:hover { color:#ff8c00; }
.notif-welcome-title { color:#eee; font-size:13px; font-weight:600; margin-bottom:4px; }
.notif-welcome-msg { color:#999; font-size:12px; line-height:1.4; }
.notif-welcome-time { color:#555; font-size:10px; margin-top:6px; }
@keyframes notifSlideIn {
    from { transform:translateX(100%); opacity:0; }
    to { transform:translateX(0); opacity:1; }
}