/* RESET E CONFIGURAÇÕES BASE */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

/* Ocultar barra de rolagem nativa globalmente */
::-webkit-scrollbar {
    display: none !important;
}

html, body { 
    height: 100%; 
    margin: 0; 
    -ms-overflow-style: none !important;  /* IE e Edge */
    scrollbar-width: none !important;  /* Firefox */
}

body { 
    background-color: #000000; 
    color: #ffffff; 
    overflow: hidden; 
}

.app-container { 
    display: flex; 
    flex-direction: column; 
    height: 100dvh; 
    width: 100vw; 
    overflow: hidden;
}

@supports not (height: 100dvh) { 
    .app-container { height: 100%; } 
}

/* HEADER TOP (Barra Superior) - PC */
.top-bar { 
    height: 64px; 
    flex-shrink: 0; 
    background-color: #121212; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 30px; 
    border-bottom: 1px solid #282828;
    z-index: 100; 
    position: relative;
}

.header-main-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: 0.2s;
    color: white;
}
.mobile-menu-btn:hover { background-color: #282828; }

.logo-container { transition: opacity 0.2s, transform 0.2s; }
.logo-container:hover { opacity: 0.8; transform: scale(1.02); }

.search-container { 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    max-width: 400px; 
}

.search-box { 
    display: flex; 
    align-items: center; 
    background-color: #242424; 
    border-radius: 20px; 
    padding: 10px 18px; 
    border: 1px solid transparent; 
    transition: background 0.3s, border-color 0.3s; 
}
.search-box:focus-within { border-color: #555; background-color: #2a2a2a; }
.search-icon { color: #b3b3b3; margin-right: 10px; font-size: 14px; }
#searchInput { 
    background: transparent; 
    border: none; 
    color: white; 
    width: 100%; 
    font-size: 14px; 
    outline: none; 
    text-overflow: ellipsis;
}
#searchInput::placeholder { color: #b3b3b3; font-weight: 500; }

.user-profile { display: flex; align-items: center; gap: 15px; position: relative; }

.admin-btn { 
    background-color: transparent; 
    color: #b3b3b3; 
    border: 1px solid #555; 
    padding: 6px 15px; 
    border-radius: 20px; 
    cursor: pointer; 
    font-size: 12px; 
    font-weight: bold; 
    transition: 0.2s; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}
.admin-btn:hover { color: white; border-color: white; transform: scale(1.05); }
.user-info:hover { background-color: #282828; }

.user-dropdown-menu { 
    position: absolute; top: 50px; right: 0; 
    background-color: #282828; border-radius: 6px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.7); 
    width: 180px; padding: 8px 0; z-index: 101; border: 1px solid #333; 
}
.user-dropdown-menu button { 
    display: block; width: 100%; text-align: left; 
    padding: 12px 20px; background: none; border: none; 
    color: #e5e5e5; cursor: pointer; font-size: 14px; font-weight: 500; transition: background 0.2s; 
}
.user-dropdown-menu button:hover { background-color: #3e3e3e; color: white; }
.logout-btn { color: #ef5466 !important; font-weight: bold !important; }

/* CORPO CENTRAL (Iframes) */
.main-content { 
    display: flex; 
    flex: 1; 
    overflow: hidden; 
    position: relative; 
}
iframe { border: none; }

#sidebar-frame { 
    width: 260px; 
    background-color: #000000; 
    flex-shrink: 0; 
    z-index: 50; 
    transition: transform 0.3s ease; 
}

.sidebar-overlay {
    display: none; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 40; 
}

#main-frame { 
    flex: 1; 
    background-color: #121212; 
    border-radius: 8px 0 0 0; 
    overflow: hidden; 
}

/* PLAYER INFERIOR */
#player-frame { 
    height: 90px; 
    width: 100%; 
    flex-shrink: 0; 
    background-color: #181818; 
    z-index: 200; 
    transition: all 0.3s ease; 
    border-top: 1px solid #282828; 
    padding-bottom: env(safe-area-inset-bottom);
}

#player-frame.fullscreen-mode { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; 
    z-index: 9999; border: none; padding-bottom: 0; 
}

/* RESPONSIVIDADE */
@media screen and (max-width: 768px) {
    .mobile-menu-btn { display: flex; }

    #sidebar-frame { 
        position: absolute; 
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%); 
    }

    #sidebar-frame.active {
        transform: translateX(0); 
        box-shadow: 10px 0 30px rgba(0,0,0,0.8);
    }

    .sidebar-overlay.active {
        display: block;
    }
    
    .top-bar { 
        flex-direction: column;
        height: auto; 
        padding: 10px 15px; 
        gap: 10px;
    }

    .search-container { 
        position: static;
        transform: none;
        max-width: 100%; 
        width: 100%;
        order: -1; 
    }

    .search-box { padding: 10px 15px; }
    #searchInput { font-size: 14px; }

    .header-main-items { align-items: center; width: 100%; order: 0; }
    
    .logo-container span { font-size: 20px !important; } 
    
    #userName, .dropdown-icon { display: none; }
    
    #player-frame { height: 110px; }
}

/* ================= TEMA CLARO ================= */
body.light-theme { background-color: #f0f0f0; color: #121212; }
body.light-theme .top-bar { background-color: #ffffff; border-bottom: 1px solid #e0e0e0; }
body.light-theme .mobile-menu-btn { color: #121212; }
body.light-theme .mobile-menu-btn:hover { background-color: #f0f0f0; }
body.light-theme .logo-text-1 { color: #121212 !important; }
body.light-theme .search-box { background-color: #f0f0f0; }
body.light-theme .search-box:focus-within { background-color: #fff; border-color: #ccc; }
body.light-theme #searchInput { color: #121212; }
body.light-theme #searchInput::placeholder { color: #666; }
body.light-theme .admin-btn { border-color: #999; color: #333; }
body.light-theme .admin-btn:hover { border-color: #121212; color: #121212; }
body.light-theme .user-info:hover { background-color: #f0f0f0; }
body.light-theme #userName { color: #121212; }
body.light-theme .user-dropdown-menu { background-color: #ffffff; border: 1px solid #ddd; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
body.light-theme .user-dropdown-menu button { color: #121212; }
body.light-theme .user-dropdown-menu button:hover { background-color: #f0f0f0; }
body.light-theme .dropdown-divider { background-color: #e0e0e0 !important; }
body.light-theme #main-frame { background-color: #fafafa; }
body.light-theme #sidebar-frame { background-color: #ffffff; border-right: 1px solid #e0e0e0; }
body.light-theme #player-frame { background-color: #ffffff; border-top: 1px solid #e0e0e0; }