/* Mobile account header styles */
@media screen and (max-width: 768px) {
    /* Hide the main section headers since we're showing the title in the header */
    .account-main section > h1:first-child {
        display: none;
    }
      /* Position logo and back button correctly */
    .sidebar-logo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1.25rem;
        height: var(--mobile-header-height, 70px);
    }
      /* Style the mobile page title */
    .mobile-page-title {
        display: block;
        font-size: 1.7rem;
        font-weight: 600;
        margin: 0;
        color: var(--text-color);
        position: absolute;
        right: 1rem;
        width: auto;
        text-align: right;
    }
      /* Style the back arrow */
    .sidebar-logo .back-arrow {
        color: var(--text-color);
        font-size: 1.7rem;
        text-decoration: none;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
    }
    
    .sidebar-logo .back-arrow:active {
        transform: scale(0.95);
        opacity: 0.9;
    }
    
    /* Hide the regular logo link on mobile */
    .sidebar-logo .logo-link {
        display: none;
    }
      /* Show mobile logo */
    .mobile-logo-text {
        display: block;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--text-color);
        margin-left: 10px;
        position: absolute;
        left: 3rem;
    }
    
    /* Dark mode styles for mobile header */
    .dark-mode .sidebar-logo {
        background: var(--card-background, #1e1e1e);
        border-color: var(--border-color, #333);
    }
    
    .dark-mode .mobile-page-title {
        color: var(--text-color, #fff);
    }
    
    .dark-mode .mobile-logo-text {
        color: var(--text-color, #fff);
    }
    
    .dark-mode .sidebar-logo .back-arrow {
        color: var(--text-color, #fff);
    }
    

}

/* Hide mobile-specific elements on desktop */
@media screen and (min-width: 769px) {
    .mobile-page-title, 
    .mobile-only,
    .mobile-logo-text {
        display: none !important;
    }
}

/* Additional styles for small mobile devices */
@media screen and (max-width: 480px) {
    .sidebar-logo {
        padding: 0 0.75rem;
    }
    
    .mobile-page-title {
        font-size: 1.7rem;
        right: 0.75rem;
    }
    
    .mobile-logo-text {
        font-size: 2.35rem;
        left: 2.5rem;
    }
    
    .sidebar-logo .back-arrow {
        width: 32px;
        height: 32px;
        font-size: 1.7rem;
    }
}

/* Hide mobile-specific elements on desktop */
@media screen and (min-width: 769px) {
    .mobile-page-title, 
    .mobile-only {
        display: none !important;
    }
}

/* Additional styles for small mobile devices */
@media screen and (max-width: 480px) {
    .sidebar-logo {
        padding: 0 0.75rem;
    }
    
    .mobile-page-title {
        font-size: 1.7rem;
        max-width: 55%;
    }
    
    .sidebar-logo .back-arrow {
        width: 32px;
        height: 32px;
        font-size: 1.7rem;
    }
}