/* Dashboard Layout (Shared) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #000000;
    color: #FFFFFF;
    min-height: 100vh;
}

.page-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: #000000;
    border-bottom: 1px solid #333;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-name {
    font-size: 20px;
    font-weight: 600;
}

.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-item {
    color: #A0A0A0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-item.active, .nav-item:hover {
    color: #FFFFFF;
}

.upgrade-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #FFFF01;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-disconnect {
    background: #333;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    color: #FFF;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-disconnect:hover {
    background: #444;
}

.btn-connect {
    background: #5865F2;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    color: #FFF;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-connect:hover {
    background: #4752C4;
}

.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #555;
    overflow: hidden;
}

.profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main Layout */
.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.sidebar {
    width: 280px;
    background: #101010;
    padding: 20px;
    border-right: 1px solid #333;
    overflow-y: auto;
}

.search-module, .category-module {
    margin-bottom: 30px;
}

.sidebar h3 {
    font-size: 14px;
    color: #A0A0A0;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.search-input input {
    width: 100%;
    padding: 10px;
    background: #1E1E1E;
    border: none;
    border-radius: 6px;
    color: #FFF;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #FFF;
    transition: background 0.2s;
}

.category-item:hover, .category-item.active {
    background: #1E1E1E;
}

.cat-icon {
    width: 24px;
    height: 24px;
    background: #333;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-area {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    background: #000000;
}

.section-title {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .main-layout {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #333;
    }
}

/* --- Footer Styles --- */
.site-footer {
    background: #000000;
    padding: 60px 0 20px;
    border-top: 1px solid #222;
    margin-top: 80px;
    width: 100%;
}

.footer-container {
    max-width: 100%;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-brand {
    max-width: 300px;
}

.footer-brand .footer-logo {
    width: 120px;
    margin-bottom: 20px;
}

.footer-brand .footer-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.brand-tagline {
    color: #A3A3A3;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

.footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.social-title {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 1, 0.15);
    padding: 8px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.social-btn:hover {
    background: rgba(255, 255, 1, 0.25);
}

.social-btn img {
    width: 18px;
    height: 18px;
}

.social-btn span {
    color: #FFFF01;
    font-size: 14px;
    font-weight: 400;
}

.footer-disclaimer {
    color: #7A7A7A;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 100%;
    text-align: justify;
}

.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 30px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.privacy-link {
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.privacy-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        gap: 40px;
    }
    
    .footer-bottom {
        flex-direction: column-reverse;
        gap: 20px;
        align-items: flex-start;
    }
}

/* --- Global Scroll Layout Override --- */
html, body {
    height: auto;
    overflow-y: auto;
}

.page-wrapper {
    height: auto;
    overflow: visible;
}

.main-layout {
    overflow: visible;
    height: auto;
    min-height: calc(100vh - 80px); /* Keep min-height */
}

.sidebar {
    height: auto;
    overflow: visible;
    /* Remove fixed width if handled by flex basis, but usually it has width */
    /* Ensure it doesn't stick if user wants full scroll */
    position: static; 
}

.content-area {
    height: auto;
    overflow: visible;
}

/* Footer Fixes */
.site-footer {
    margin-top: 60px; /* Space from content */
    width: 100%;
    flex-shrink: 0;
}

/* --- Sidebar Transparent Fix --- */
.sidebar {
    background: transparent !important;
    border-right: none !important; /* Optional: user said bg is same, so border might be unwanted too? or maybe keep border? user only said "bg is wrong". I'll keep border for separation unless asked, but transparent bg implies seamless. I'll make border subtle or remove if transparent usually means seamless. Let's keep border for structure but subtle. Actually user said "bg is same as main bg", so visually it's one surface. Border might look weird if it cuts content. I'll make border transparent too to be safe or very subtle. I'll set background transparent first. */
    background-color: transparent !important;
}

/* --- Footer Layout Fix --- */
.site-footer {
    width: 100%;
    margin-top: 0;
    border-top: 1px solid #222;
    background: #000; /* Footer usually has its own bg, user didn't say footer bg is transparent. */
    padding-top: 60px;
    padding-bottom: 40px;
}

/* Ensure page wrapper handles the footer flow */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-layout {
    flex: 1; /* Pushes footer down */
}

/* --- UI Refinements --- */

/* Sidebar Search */
.search-module h3.search-label {
    font-size: 12px;
    font-weight: 600;
    color: #666; /* Matching other sidebar titles */
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
}

.search-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Footer Tagline Spacing */
.brand-tagline {
    margin-top: 24px !important;
    color: #A3A3A3;
}

/* Ensure Contact is last on mobile if stacked, but user asked for Menu Order */
/* The HTML order dictates visual order in flex row usually */

/* --- Sidebar Styling Fixes --- */

/* 1. Labels Uniformity */
.sidebar-title, 
.search-module h3.search-label {
    color: #A0A0A0 !important; /* Uniform color */
    text-transform: none !important; /* No capitalization */
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
}

/* 2. Category List Items */
.category-item {
    background: transparent !important; /* Force transparent for inactive */
    color: #E0E0E0 !important; /* Off-white text */
    border: none;
    transition: all 0.2s ease;
}

.category-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #FFFFFF !important;
}

/* Active State */
.category-item.active {
    background: #FFFF01 !important; /* Yellow bg */
    color: #000000 !important; /* Black text */
    font-weight: 700 !important;
}

/* Inactive Icons need to be white/off-white (brightness filter) */
.category-item:not(.active) .cat-icon-wrapper img {
    filter: brightness(0) invert(0.9) !important; /* Make icons off-white */
    opacity: 0.8;
}

.category-item.active .cat-icon-wrapper img {
    filter: none !important; /* Original icon color (usually black or dark for yellow bg) */
    /* Wait, assets might be colored. If active is yellow bg, icons should be dark? */
    /* Let's check icons. If they are colored PNGs, filter: none is correct. */
    /* If they are black icons, they work on yellow. */
    /* The user said "yang lain itu harusnya sama kaya active cuma bgnya transparnet". */
    /* Means shape/content is same. */
}