/**
 * Custom.css - Core Site-Wide Customizations
 * Diamond Secrets Chat System
 * 
 * This file contains ONLY CSS custom properties (variables)
 * and site-wide theme overrides. Feature-specific styles
 * are in the modules/ directory.
 * 
 * Load order:
 * 1. main.css (CodyChat core)
 * 2. custom.css (THIS FILE - variables & core overrides)
 * 3. modules/*.css (Feature-specific styles)
 */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    /* Banner Colors */
    --banner-dj-primary: rgba(46, 0, 62, 0.7);
    --banner-dj-secondary: rgba(0, 31, 63, 0.7);
    --banner-dj-border: rgba(255, 0, 200, 0.3);
    --banner-dj-shadow: rgba(255, 0, 200, 0.2);
    
    --banner-owner-primary: rgba(0, 61, 89, 0.7);
    --banner-owner-secondary: rgba(70, 0, 90, 0.7);
    --banner-owner-border: rgba(0, 255, 255, 0.3);
    --banner-owner-shadow: rgba(0, 255, 255, 0.2);
    
    --banner-bot-primary: rgba(0, 255, 191, 0.1);
    --banner-bot-secondary: rgba(0, 90, 255, 0.1);
    --banner-bot-border: rgba(0, 255, 170, 0.3);
    --banner-bot-shadow: rgba(0, 255, 170, 0.1);
    
    --banner-vip-primary: rgba(100, 0, 100, 0.5);
    --banner-vip-secondary: rgba(0, 0, 0, 0.4);
    --banner-vip-border: rgba(255, 0, 255, 0.3);
    --banner-vip-shadow: rgba(255, 0, 255, 0.4);
    
    --banner-diamonds-primary: rgba(139, 92, 246, 0.15);
    --banner-diamonds-border: rgba(139, 92, 246, 0.3);
    --banner-diamonds-shadow: rgba(139, 92, 246, 0.1);
    
    --banner-user-primary: rgba(255, 255, 255, 0.1);
    --banner-user-secondary: rgba(200, 200, 255, 0.08);
    --banner-user-border: rgba(255, 255, 255, 0.15);
    --banner-user-shadow: rgba(255, 255, 255, 0.08);
    
    --banner-guest-primary: rgba(100, 100, 100, 0.5);
    --banner-guest-secondary: rgba(0, 0, 0, 0.4);
    --banner-guest-border: rgba(200, 200, 200, 0.3);
    --banner-guest-shadow: rgba(200, 200, 200, 0.4);
    
    --banner-offline-primary: rgba(80, 0, 0, 0.5);
    --banner-offline-secondary: rgba(0, 0, 0, 0.4);
    --banner-offline-border: rgba(200, 50, 50, 0.3);
    --banner-offline-shadow: rgba(200, 50, 50, 0.4);
    
    --banner-site-staff-primary: rgba(142, 68, 173, 0.7);
    --banner-site-staff-secondary: rgba(155, 89, 182, 0.7);
    --banner-site-staff-border: rgba(155, 89, 182, 0.3);
    --banner-site-staff-shadow: rgba(155, 89, 182, 0.2);
    
    --banner-vip-staff-primary: rgba(234, 88, 12, 0.7);
    --banner-vip-staff-secondary: rgba(249, 115, 22, 0.7);
    --banner-vip-staff-border: rgba(249, 115, 22, 0.3);
    --banner-vip-staff-shadow: rgba(249, 115, 22, 0.2);
    
    --banner-total-primary: rgba(0, 150, 255, 0.15);
    --banner-total-secondary: rgba(0, 100, 255, 0.15);
    --banner-total-border: rgba(0, 150, 255, 0.3);
    --banner-total-shadow: rgba(0, 150, 255, 0.1);
    
    /* Common Effects */
    --backdrop-blur: blur(10px);
    --banner-hover-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    --card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-round: 50%;
    
    /* Colors */
    --accent-primary: #4CAF50;
    --accent-secondary: #007cba;
    --accent-warning: #6c5ce7;
    --accent-danger: #ff6b6b;
    --accent-info: #03add8;
    
    /* Banner Content Variables (for theme compatibility) */
    --count-bg: rgba(255, 255, 255, 0.15);
    --banner-content-bg: rgba(0, 0, 0, 0.25);
    --banner-content-color: inherit;
    --banner-content-border: rgba(255, 255, 255, 0.1);
    --user-item-bg: rgba(255, 255, 255, 0.05);
    --user-item-border: rgba(255, 255, 255, 0.05);
    --user-item-hover-bg: rgba(255, 255, 255, 0.1);
    --user-item-hover-border: rgba(255, 255, 255, 0.1);
    --total-title: #66a9ff;
}

/* ===== GLOBAL MOBILE RESPONSIVE ===== */
/* Apply site-wide mobile adjustments */
@media (max-width: 768px) {
    /* Reduce padding on mobile */
    .page_element {
        padding: 15px;
    }
    
    /* Smaller buttons on mobile */
    .reg_button,
    .small_button {
        padding: 8px;
        min-width: 80px;
    }
}

/* ===== THEME OVERRIDES ===== */
/* Only include overrides that MUST apply site-wide */
/* Keep this section minimal - most styling should be in modules */

/* ===== MINI MUSIC PLAYER (Header) ===== */
.profile_music_mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    margin-left: 10px;
}

.mini_eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 20px;
}

.mini_bar {
    width: 3px;
    background: #1DB954;
    border-radius: 2px;
    animation: mini_eq_pulse 0.8s ease-in-out infinite;
    opacity: 0.3;
}

.mini_bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.mini_bar:nth-child(2) { height: 10px; animation-delay: 0.1s; }
.mini_bar:nth-child(3) { height: 14px; animation-delay: 0.2s; }
.mini_bar:nth-child(4) { height: 10px; animation-delay: 0.3s; }
.mini_bar:nth-child(5) { height: 8px; animation-delay: 0.4s; }

.mini_eq.playing .mini_bar {
    opacity: 1;
}

@keyframes mini_eq_pulse {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1.2); }
}

.mini_play_btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #1DB954;
    background: rgba(29, 185, 84, 0.2);
    color: #1DB954;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mini_play_btn:hover {
    background: rgba(29, 185, 84, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
}

.mini_play_btn i {
    margin-left: 1px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .profile_music_mini {
        padding: 5px 8px;
        gap: 6px;
    }
    
    .mini_eq {
        height: 18px;
    }
    
    .mini_play_btn {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}

/* ===== NEWS PANEL FILE UPLOADS - FIRST LARGE, REST SMALL ===== */
/* Display uploaded files in preview - first large, rest small horizontal */
#post_file_data {
    display: block;
}

/* First uploaded file - large */
#post_file_data .up_file:first-child {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
}

#post_file_data .up_file:first-child .up_image {
    max-height: 200px;
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 6px;
}

/* Remaining files - smaller and horizontal, aligned to bottom */
#post_file_data .up_file:not(:first-child) {
    display: inline-block;
    width: auto;
    max-width: 120px;
    margin-right: 8px;
    vertical-align: bottom;
}

#post_file_data .up_file:not(:first-child) .up_image {
    max-height: 80px;
    max-width: 120px;
    width: auto;
    height: auto;
    border-radius: 6px;
}

#post_file_data .up_file_content {
    display: block;
}

#post_file_data .up_data {
    display: block;
}

/* Display files in published news posts - first large, rest small horizontal */
.news_files_container {
    margin: 10px 0;
}

/* Single file fallback (old posts) - display large */
.news_files_container > .post_image:only-child,
.news_files_container > .post_audio:only-child,
.news_files_container > .post_video:only-child,
.news_files_container > .post_zip:only-child {
    width: 100%;
    max-width: 100%;
}

.news_files_container > .post_image:only-child img {
    max-height: 400px;
    max-width: 100%;
}

/* First image - large display */
.news_file_first {
    margin-bottom: 10px;
}

.news_file_first .post_image {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.news_file_first .post_image img {
    max-height: 400px;
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
}

/* Remaining images - smaller and horizontal, aligned to bottom */
.news_files_remaining {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.news_files_remaining .news_file_item {
    flex: 0 0 auto;
}

.news_files_remaining .news_file_item .post_image {
    width: auto;
    max-width: 120px;
    margin: 0;
}

.news_files_remaining .news_file_item .post_image img {
    max-height: 100px;
    max-width: 120px;
    width: auto;
    height: auto;
    border-radius: 6px;
}

.news_files_remaining .news_file_item .post_audio,
.news_files_remaining .news_file_item .post_video,
.news_files_remaining .news_file_item .post_zip {
    width: auto;
    max-width: 120px;
    margin: 0;
}

/* Mobile: Adjust layout for small screens */
@media (max-width: 768px) {
    /* Preview area - stack vertically on mobile */
    #post_file_data .up_file:first-child .up_image {
        max-height: 150px;
    }
    
    #post_file_data .up_file:not(:first-child) {
        max-width: 100px;
    }
    
    #post_file_data .up_file:not(:first-child) .up_image {
        max-height: 70px;
        max-width: 100px;
    }
    
    /* Published posts - stack vertically on mobile */
    .news_file_first .post_image img {
        max-height: 250px;
    }
    
    .news_files_remaining {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .news_files_remaining .news_file_item {
        max-width: 100px;
    }
    
    .news_files_remaining .news_file_item .post_image img {
        max-height: 80px;
        max-width: 100px;
    }
}

/* ===== CUSTOM ROLE STYLING ===== */
.profile_custom_role {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    animation: roleGlow 0.3s ease-in-out;
}

.profile_custom_role i {
    font-size: 14px;
}

.profile_custom_role .role-label {
    font-weight: 700;
    opacity: 0.9;
    margin-right: 2px;
}

.profile_custom_role .role-value {
    font-weight: 500;
    opacity: 0.95;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 180px;
    line-height: 1.3;
    display: block;
    max-height: 2.6em;
    overflow: hidden;
}

@keyframes roleGlow {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .profile_custom_role {
        /* 1. Prevent it from crossing modal edges */
        max-width: 90%; 
        
        /* 2. Allow height to grow for the second line */
        height: auto;
        padding: 6px 10px;
        
        /* 3. Ensure it stays centered */
        margin: 5px auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .profile_custom_role .role-value {
        /* 4. Enable wrapping (split into lines) */
        white-space: normal; 
        
        /* 5. Set a safe maximum width for mobile screens */
        /* 200px is usually safe for mobile modals (approx 320px-400px wide) */
        max-width: 200px; 
        
        /* 6. Text formatting for multi-line */
        line-height: 1.2;
        text-align: left;
        overflow: visible;
    }
}