/*
 * Artist AMP Portal - Global Dashboard Styles
 * Applied to ALL dashboard pages (sidebar + header)
 */

/* ========== SIDEBAR STYLES ========== */

/* Logo in sidebar - orange background */
.sidebar-logo-container {
    background-color: #FF6B35 !important;
    padding: 0 20px 25px 20px !important;
    text-align: center !important;
    margin: 0 !important;
}

.sidebar-logo {
    max-width: 160px !important;
    width: 85% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Align logo with header */
.sidebar {
    padding-top: 0 !important;
}

/* Remove gap between logo and nav */
.nav-menu {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.nav-item:first-child {
    margin-top: 0 !important;
}

/* Sidebar text - light gray and bigger */
.nav-item a {
    font-size: 16px !important;
    color: #B5BAC1 !important;
}

.nav-section-header {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #B5BAC1 !important;
}

/* ========== HEADER STYLES ========== */

/* Remove logo from header (it is in sidebar now) */
.header-logo {
    display: none !important;
}

.header-left {
    display: none !important;
}

/* Header right container */
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* User profile section */
}

/* Welcome text */
.welcome-text {
    color: #B5BAC1 !important;
}

.user-name {
    color: #FFFFFF !important;
}

/* Header actions (Settings and Sign Out) - FIXED WIDTH to prevent shifting */
.header-actions {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    margin-left: auto !important;
    min-width: 180px !important;
    justify-content: flex-end !important;
}

.header-actions a {
    color: #B5BAC1 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.header-actions a:hover {
    background-color: #3F4147 !important;
    color: #FFFFFF !important;
}

/* Settings icon - square button with fixed width */
.header-actions a[href*="account-settings"] {
    padding: 10px 10px !important;
    border-radius: 6px !important;
    background-color: #3F4147 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
}

.header-actions a[href*="account-settings"]:hover {
    background-color: #4F5157 !important;
}

/* ========== GLOBAL PAGE STYLES ========== */

/* Main content background */
.page-content {
    background-color: #2B2D31 !important;
}

.main-content {
    background-color: #2B2D31 !important;
}


}

/* Make Welcome and Username inline */
}

.welcome-text {
    color: #B5BAC1 !important;
    margin-right: 4px !important;
}

.user-name {
    color: #FFFFFF !important;
}

.api-status-indicators {
    width: 100% !important;
    margin-top: 4px !important;
}

/* Fix status indicator display */
.api-status-indicators {
    display: flex !important;
    gap: 12px !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.status-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.status-label {
    color: #B5BAC1 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    background: transparent !important;
}

.status-dot {
    font-size: 10px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

}

}

/* Header layout - inline Welcome and username */
.profile-text {
    display: block !important;
    line-height: 1.4 !important;
}

.welcome-text {
    display: inline !important;
    color: #B5BAC1 !important;
    margin-right: 5px !important;
}

.user-name {
    display: inline !important;
    color: #FFFFFF !important;
}

.api-status-indicators {
    display: flex !important;
    gap: 12px !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* User profile spacing */
.user-profile {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}