/**
 * MadBot - Moderation Banner Styles
 * 
 * Centralized styles for user moderation banners (warned, suspended, banned).
 * This file handles positioning for ALL page layouts.
 * 
 * @package MadBot
 * @since 1.0.0
 */

/* =============================================================================
   BANNER BASE STYLES
   ============================================================================= */

.moderation-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999; /* Below menu dropdown (10000) */
    height: 40px;
    box-sizing: border-box;
}

.moderation-banner svg {
    flex-shrink: 0;
}

.moderation-banner span {
    flex: 1;
}

/* =============================================================================
   BANNER COLOR VARIANTS
   ============================================================================= */

/* Warned - Yellow/Amber */
.moderation-warned {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

/* Suspended - Orange */
.moderation-suspended {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
}

/* Banned - Red */
.moderation-banned {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

/* =============================================================================
   LAYOUT ADJUSTMENTS WHEN BANNER IS VISIBLE
   Push all fixed/absolute elements down by banner height (40px)
   ============================================================================= */

/* App container - push down the entire flex layout */
body:has(.moderation-banner) .app-container {
    margin-top: 40px;
    height: calc(100vh - 40px);
}

/* Profile menu button (top-right) */
body:has(.moderation-banner) #profileMenuBtn {
    top: 60px;
}

/* Profile dropdown menu */
body:has(.moderation-banner) #profileMenu {
    top: 98px;
}

/* Sidebar expand button (when sidebar is hidden) */
body:has(.moderation-banner) .sidebar-expand-btn {
    top: 52px; /* 40px banner + 12px original */
}

/* =============================================================================
   MAIN CONTENT AREAS - Push down when banner visible
   For pages that don't use app-container layout
   ============================================================================= */

/* My Creations page */
body:has(.moderation-banner) .main-content {
    margin-top: 40px;
}

/* Account page */
body:has(.moderation-banner) .account-container {
    margin-top: 40px;
}

/* Profile page */
body:has(.moderation-banner) .profile-container {
    margin-top: 40px;
}

/* Explore page */
body:has(.moderation-banner) .explore-container {
    margin-top: 40px;
}

/* Contact page */
body:has(.moderation-banner) .contact-container {
    margin-top: 40px;
}

/* Legal pages (terms, privacy) */
body:has(.moderation-banner) .legal-container {
    margin-top: 40px;
}

/* =============================================================================
   INPUT RESTRICTIONS FOR SUSPENDED/BANNED USERS
   Disable chat input when user cannot send messages
   ============================================================================= */

body:has(.moderation-suspended) .input-container,
body:has(.moderation-banned) .input-container {
    opacity: 0.5;
    pointer-events: none;
}

body:has(.moderation-suspended) .input-container::after,
body:has(.moderation-banned) .input-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: not-allowed;
}

/* =============================================================================
   MOBILE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
    .moderation-banner {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* Adjust hamburger button position */
    body:has(.moderation-banner) .mobile-menu-btn {
        top: 48px;
    }
    
    /* Adjust sidebar expand button on mobile */
    body:has(.moderation-banner) .sidebar-expand-btn {
        top: 48px;
    }
}