/* ========================================
   SERVER DETAIL THEME PRESETS
   Separate file for theme-specific styles
   ======================================== */

/* ========================================
   THEME CSS VARIABLES (Base)
   These can be overridden by inline styles from theme_config
   ======================================== */
:root {
    /* Primary accent color - used for verification marks, section icons, category labels, stats, borders */
    --sd-primary-color: #7d19ff;
    /* Secondary accent color - used for special tags (Web3/NSFW), gradient accents */
    --sd-secondary-color: #F4CA81;
    /* Text color - used for headings and main text */
    --sd-text-color: #ffffff;
    /* Background base color - default dark */
    --sd-bg-color: #1a1b1e;
    /* Border accent gradient */
    --sd-border-accent: linear-gradient(90deg, var(--sd-primary-color), var(--sd-secondary-color));
    /* Pattern opacity for icon background pattern */
    --sd-pattern-opacity: 0.08;
    
    /* Card styling variables */
    --sd-card-border-radius: 12px;
    --sd-card-border-style: solid;
    --sd-card-border-width: 1px;
    --sd-card-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --sd-card-bg: var(--sd-bg-color);
    --sd-card-backdrop-filter: none;
}

/* ========================================
   BACKGROUND TYPES
   Applied via data-bg-type attribute
   ======================================== */

/* No background styling (when data-bg-type="none") - pure dark, no color mixing */
.server-detail-page[data-bg-type="none"] {
    background: #1a1b1e !important;
    min-height: 100vh;
}

/* Gradient background overlay (when data-bg-type="gradient_dual") */
.server-detail-page[data-bg-type="gradient_dual"] {
    background: linear-gradient(to right, 
        color-mix(in srgb, var(--sd-primary-color) 12%, var(--sd-bg-color)),
        color-mix(in srgb, var(--sd-secondary-color) 10%, var(--sd-bg-color))
    ) !important;
    min-height: 100vh;
}

/* Dark gradient background (when data-bg-type="gradient_dark") */
.server-detail-page[data-bg-type="gradient_dark"] {
    background: linear-gradient(to right, 
        var(--sd-bg-color),
        color-mix(in srgb, var(--sd-primary-color) 15%, var(--sd-bg-color))
    ) !important;
    min-height: 100vh;
}

/* Solid background (when data-bg-type="solid") */
.server-detail-page[data-bg-type="solid"] {
    background: color-mix(in srgb, var(--sd-primary-color) 10%, var(--sd-bg-color)) !important;
    min-height: 100vh;
}

/* Pattern background overlay - Icon Pattern (only applied when data-bg-type="pattern") */
.server-detail-page[data-bg-type="pattern"] {
    background: var(--sd-bg-color) !important;
    min-height: 100vh;
    position: relative;
}

.server-detail-page[data-bg-type="pattern"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-image: var(--sd-pattern-url);
    background-size: 60px;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: var(--sd-pattern-opacity, 0.08);
    pointer-events: none;
    z-index: 1;
}

/* ========================================
   TEXTURE PATTERNS (CSS-only)
   Applied via data-bg-type attribute
   ======================================== */

/* Noise/Grain Texture */
.server-detail-page[data-bg-type="texture_grain"] {
    background: var(--sd-bg-color) !important;
    min-height: 100vh;
    position: relative;
}

.server-detail-page[data-bg-type="texture_grain"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: var(--sd-pattern-opacity, 0.05);
    pointer-events: none;
    z-index: 1;
}

/* Dots Pattern */
.server-detail-page[data-bg-type="texture_dots"] {
    background: var(--sd-bg-color) !important;
    min-height: 100vh;
    position: relative;
}

.server-detail-page[data-bg-type="texture_dots"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* Dots pattern - using radial gradient with proper positioning */
    background-image: radial-gradient(circle, var(--sd-primary-color) 3.5px, transparent 3.5px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    opacity: var(--sd-pattern-opacity, 0.6);
    pointer-events: none;
    z-index: 1;
}

/* Grid/Lines Pattern */
.server-detail-page[data-bg-type="texture_grid"] {
    background: var(--sd-bg-color) !important;
    min-height: 100vh;
    position: relative;
}

.server-detail-page[data-bg-type="texture_grid"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-image: 
        linear-gradient(to right, var(--sd-primary-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--sd-primary-color) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: var(--sd-pattern-opacity, 0.2);
    pointer-events: none;
    z-index: 1;
}

/* Circuit Pattern (Tech/Hacker style) */
.server-detail-page[data-bg-type="texture_circuit"] {
    background: var(--sd-bg-color) !important;
    min-height: 100vh;
    position: relative;
}

.server-detail-page[data-bg-type="texture_circuit"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* Circuit board pattern: paths with connection nodes */
    background-image: 
        /* Horizontal circuit paths (not full width) */
        linear-gradient(to right, transparent 0px, transparent 15px, var(--sd-primary-color) 15px, var(--sd-primary-color) 25px, transparent 25px),
        linear-gradient(to right, transparent 0px, transparent 35px, var(--sd-primary-color) 35px, var(--sd-primary-color) 45px, transparent 45px),
        linear-gradient(to right, transparent 0px, transparent 55px, var(--sd-primary-color) 55px, var(--sd-primary-color) 65px, transparent 65px),
        /* Vertical circuit paths */
        linear-gradient(to bottom, transparent 0px, transparent 15px, var(--sd-primary-color) 15px, var(--sd-primary-color) 25px, transparent 25px),
        linear-gradient(to bottom, transparent 0px, transparent 35px, var(--sd-primary-color) 35px, var(--sd-primary-color) 45px, transparent 45px),
        linear-gradient(to bottom, transparent 0px, transparent 55px, var(--sd-primary-color) 55px, var(--sd-primary-color) 65px, transparent 65px),
        /* Connection nodes (circular pads) */
        radial-gradient(circle at 20px 20px, var(--sd-primary-color) 3px, transparent 3px),
        radial-gradient(circle at 40px 40px, var(--sd-primary-color) 3px, transparent 3px),
        radial-gradient(circle at 60px 20px, var(--sd-primary-color) 3px, transparent 3px),
        radial-gradient(circle at 20px 60px, var(--sd-primary-color) 3px, transparent 3px);
    background-size: 
        80px 2px,  /* horizontal path 1 */
        80px 2px,  /* horizontal path 2 */
        80px 2px,  /* horizontal path 3 */
        2px 80px,  /* vertical path 1 */
        2px 80px,  /* vertical path 2 */
        2px 80px,  /* vertical path 3 */
        80px 80px, /* node 1 */
        80px 80px, /* node 2 */
        80px 80px, /* node 3 */
        80px 80px; /* node 4 */
    background-position: 
        0 20px,    /* horizontal path 1 */
        0 40px,    /* horizontal path 2 */
        0 60px,    /* horizontal path 3 */
        20px 0,    /* vertical path 1 */
        40px 0,    /* vertical path 2 */
        60px 0,    /* vertical path 3 */
        0 0,       /* node 1 */
        0 0,       /* node 2 */
        0 0,       /* node 3 */
        0 0;       /* node 4 */
    opacity: var(--sd-pattern-opacity, 0.08);
    pointer-events: none;
    z-index: 1;
}

/* Hexagon Pattern (Gaming style) */
.server-detail-page[data-bg-type="texture_hexagon"] {
    background: var(--sd-bg-color) !important;
    min-height: 100vh;
    position: relative;
}

.server-detail-page[data-bg-type="texture_hexagon"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    /* Use CSS mask to apply primary color to hexagon pattern */
    background-color: var(--sd-primary-color);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='white' fill-opacity='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='white' fill-opacity='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
    mask-size: 28px 49px;
    -webkit-mask-size: 28px 49px;
    opacity: var(--sd-pattern-opacity, 0.15);
    pointer-events: none;
    z-index: 1;
}

/* Stars Pattern (Cosmic style) */
.server-detail-page[data-bg-type="texture_stars"] {
    background: transparent !important;
    min-height: 100vh;
    position: relative;
}

.server-detail-page[data-bg-type="texture_stars"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #ffffff, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 160px 120px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 200px 50px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 60px 100px, #ffffff, transparent),
        radial-gradient(2px 2px at 180px 150px, rgba(255,255,255,0.7), transparent);
    background-size: 200px 200px;
    opacity: var(--sd-pattern-opacity, 0.6);
    pointer-events: none;
    z-index: 1;
    animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% { opacity: 0.4; }
    100% { opacity: 0.7; }
}

/* ========================================
   CARD STYLE VARIATIONS
   Applied via data-card-style attribute on .server-detail-page
   ======================================== */

/* Card Style: None - transparent background */
.server-detail-page[data-card-style="none"] .analytics-card,
.server-detail-page[data-card-style="none"] .server-description,
.server-detail-page[data-card-style="none"] .sidebar-recommendations,
.server-detail-page[data-card-style="none"] .listing-analytics-card,
.server-detail-page[data-card-style="none"] .announcement-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Card Style: Rounded (default) */
.server-detail-page[data-card-style="rounded"] .analytics-card,
.server-detail-page[data-card-style="rounded"] .server-description,
.server-detail-page[data-card-style="rounded"] .sidebar-recommendations,
.server-detail-page[data-card-style="rounded"] .listing-analytics-card,
.server-detail-page[data-card-style="rounded"] .announcement-card {
    border-radius: var(--sd-card-border-radius);
}

/* Card Style: Sharp - no border radius */
.server-detail-page[data-card-style="sharp"] .analytics-card,
.server-detail-page[data-card-style="sharp"] .server-description,
.server-detail-page[data-card-style="sharp"] .sidebar-recommendations,
.server-detail-page[data-card-style="sharp"] .listing-analytics-card,
.server-detail-page[data-card-style="sharp"] .announcement-card,
.server-detail-page[data-card-style="sharp"] .powered-by-badge {
    border-radius: 0 !important;
}

/* When card style is sharp, also make banner and header sharp */
.server-detail-page[data-card-style="sharp"] .server-banner,
.server-detail-page[data-card-style="sharp"] .server-banner img,
.server-detail-page[data-card-style="sharp"] .server-header,
.server-detail-page[data-card-style="sharp"] .container .server-header:first-child {
    border-radius: 0 !important;
}

/* When card style is sharp, make edit forms sharp too */
.server-detail-page[data-card-style="sharp"] .description-edit-form,
.server-detail-page[data-card-style="sharp"] .categories-edit-form,
.server-detail-page[data-card-style="sharp"] .edit-form textarea,
.server-detail-page[data-card-style="sharp"] .description-edit-form .form-control,
.server-detail-page[data-card-style="sharp"] .description-edit-form .large-textarea,
.server-detail-page[data-card-style="sharp"] .modern-categories-editor,
.server-detail-page[data-card-style="sharp"] .categories-edit-form .selected-categories-display,
.server-detail-page[data-card-style="sharp"] .categories-edit-form .category-badge,
.server-detail-page[data-card-style="sharp"] .categories-edit-form .category-dropdown-content,
.server-detail-page[data-card-style="sharp"] .categories-edit-form .category-item,
.server-detail-page[data-card-style="sharp"] .modern-select,
.server-detail-page[data-card-style="sharp"] .required-badge,
.server-detail-page[data-card-style="sharp"] .optional-badge,
.server-detail-page[data-card-style="sharp"] .tags-input-area,
.server-detail-page[data-card-style="sharp"] .modern-tag,
.server-detail-page[data-card-style="sharp"] .description-edit-form .btn,
.server-detail-page[data-card-style="sharp"] .categories-edit-form .btn,
.server-detail-page[data-card-style="sharp"] .language-tag,
.server-detail-page[data-card-style="sharp"] .language-edit-form,
.server-detail-page[data-card-style="sharp"] .language-edit-form .language-select,
.server-detail-page[data-card-style="sharp"] .language-edit-form .form-control,
.server-detail-page[data-card-style="sharp"] .language-edit-form .btn,
.server-detail-page[data-card-style="sharp"] .modal .visibility-section,
.server-detail-page[data-card-style="sharp"] .modal .visibility-toggle-input,
.server-detail-page[data-card-style="sharp"] .recommended-server-card,
.server-detail-page[data-card-style="sharp"] .server-card-category,
.server-detail-page[data-card-style="sharp"] .server-card-actions .btn,
.server-detail-page[data-card-style="sharp"] .sidebar-recommendations::before,
.server-detail-page[data-card-style="sharp"] .sidebar-server-card,
.server-detail-page[data-card-style="sharp"] .sidebar-server-category,
.server-detail-page[data-card-style="sharp"] .sidebar-view-btn,
.server-detail-page[data-card-style="sharp"] .social-link-row:hover,
.server-detail-page[data-card-style="sharp"] #addSocialLinkBtn,
.server-detail-page[data-card-style="sharp"] #socialLinkConfirmModal .text-warning,
.server-detail-page[data-card-style="sharp"] .activity-level-display,
.server-detail-page[data-card-style="sharp"] .activity-badge,
.server-detail-page[data-card-style="sharp"] .tooltip .tooltip-inner,
.server-detail-page[data-card-style="sharp"] .announcement-card,
.server-detail-page[data-card-style="sharp"] .markdown-content code,
.server-detail-page[data-card-style="sharp"] .markdown-content pre,
.server-detail-page[data-card-style="sharp"] .btn-show-more-announcements,
.server-detail-page[data-card-style="sharp"] .announcement-count-badge,
.server-detail-page[data-card-style="sharp"] .listing-stats-chart-section,
.server-detail-page[data-card-style="sharp"] .chart-wrapper,
.server-detail-page[data-card-style="sharp"] .funnel-bar,
.server-detail-page[data-card-style="sharp"] .progress,
.server-detail-page[data-card-style="sharp"] .modal .form-check.form-switch .form-check-input,
.server-detail-page[data-card-style="sharp"] .server-tag {
    border-radius: 0 !important;
}

/* Card Style: Glass - frosted glass effect */
.server-detail-page[data-card-style="glass"] .analytics-card,
.server-detail-page[data-card-style="glass"] .server-description,
.server-detail-page[data-card-style="glass"] .sidebar-recommendations,
.server-detail-page[data-card-style="glass"] .listing-analytics-card,
.server-detail-page[data-card-style="glass"] .announcement-card {
    background: rgba(43, 45, 49, 0.6) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Card Style: Neumorphism - soft 3D effect */
.server-detail-page[data-card-style="neumorphism"] .analytics-card,
.server-detail-page[data-card-style="neumorphism"] .server-description,
.server-detail-page[data-card-style="neumorphism"] .sidebar-recommendations,
.server-detail-page[data-card-style="neumorphism"] .listing-analytics-card,
.server-detail-page[data-card-style="neumorphism"] .announcement-card {
    background: #2b2d31 !important;
    border: none !important;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.4),
        -8px -8px 16px rgba(60, 62, 68, 0.2) !important;
}

/* ========================================
   CARD SHADOW VARIATIONS
   Applied via data-card-shadow attribute on .server-detail-page
   ======================================== */

/* Shadow: None */
.server-detail-page[data-card-shadow="none"] .analytics-card,
.server-detail-page[data-card-shadow="none"] .server-description,
.server-detail-page[data-card-shadow="none"] .sidebar-recommendations,
.server-detail-page[data-card-shadow="none"] .listing-analytics-card,
.server-detail-page[data-card-shadow="none"] .announcement-card {
    box-shadow: none !important;
}

/* Shadow: Subtle */
.server-detail-page[data-card-shadow="subtle"] .analytics-card,
.server-detail-page[data-card-shadow="subtle"] .server-description,
.server-detail-page[data-card-shadow="subtle"] .sidebar-recommendations,
.server-detail-page[data-card-shadow="subtle"] .listing-analytics-card,
.server-detail-page[data-card-shadow="subtle"] .announcement-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Shadow: Medium (default) */
.server-detail-page[data-card-shadow="medium"] .analytics-card,
.server-detail-page[data-card-shadow="medium"] .server-description,
.server-detail-page[data-card-shadow="medium"] .sidebar-recommendations,
.server-detail-page[data-card-shadow="medium"] .listing-analytics-card,
.server-detail-page[data-card-shadow="medium"] .announcement-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Shadow: Strong */
.server-detail-page[data-card-shadow="strong"] .analytics-card,
.server-detail-page[data-card-shadow="strong"] .server-description,
.server-detail-page[data-card-shadow="strong"] .sidebar-recommendations,
.server-detail-page[data-card-shadow="strong"] .listing-analytics-card,
.server-detail-page[data-card-shadow="strong"] .announcement-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Shadow: Neon - uses primary color */
.server-detail-page[data-card-shadow="neon"] .analytics-card,
.server-detail-page[data-card-shadow="neon"] .server-description,
.server-detail-page[data-card-shadow="neon"] .sidebar-recommendations,
.server-detail-page[data-card-shadow="neon"] .listing-analytics-card,
.server-detail-page[data-card-shadow="neon"] .announcement-card {
    box-shadow: 0 0 20px color-mix(in srgb, var(--sd-primary-color) 40%, transparent),
                0 0 40px color-mix(in srgb, var(--sd-primary-color) 20%, transparent) !important;
}

/* ========================================
   BACKGROUND CONTAINER OVERRIDES
   Ensure backgrounds show through properly
   ======================================== */

/* For gradient and pattern backgrounds, make container transparent so background shows through */
.server-detail-page[data-bg-type="gradient_dual"] .container,
.server-detail-page[data-bg-type="gradient_dark"] .container,
.server-detail-page[data-bg-type="pattern"] .container,
.server-detail-page[data-bg-type^="texture_"] .container {
    background-color: transparent;
    max-width: 1200px;
}

/* For solid background, use theme background color */
.server-detail-page[data-bg-type="solid"] .container,
.server-detail-page:not([data-bg-type]) .container {
    background-color: var(--sd-bg-color);
    max-width: 1200px;
}

/* For pattern/texture background, ensure z-index */
.server-detail-page[data-bg-type="pattern"] .container,
.server-detail-page[data-bg-type^="texture_"] .container {
    position: relative;
    z-index: 2;
}

/* Ensure container with mt-4 uses proper background */
.server-detail-page[data-bg-type="gradient_dual"] .container.mt-4,
.server-detail-page[data-bg-type="gradient_dark"] .container.mt-4,
.server-detail-page[data-bg-type="pattern"] .container.mt-4,
.server-detail-page[data-bg-type^="texture_"] .container.mt-4 {
    background-color: transparent !important;
}

.server-detail-page[data-bg-type="solid"] .container.mt-4,
.server-detail-page:not([data-bg-type]) .container.mt-4 {
    background-color: var(--sd-bg-color) !important;
}

/* Body background handling for pattern/texture types */
body:has(.server-detail-page[data-bg-type="pattern"]),
body:has(.server-detail-page[data-bg-type^="texture_"]) {
    background-color: var(--sd-bg-color) !important;
}

body:has(.server-detail-page[data-bg-type="none"]) {
    background-color: #1a1b1e !important;
}

html:has(.server-detail-page[data-bg-type="pattern"]),
html:has(.server-detail-page[data-bg-type^="texture_"]) {
    background-color: var(--sd-bg-color) !important;
}

html:has(.server-detail-page[data-bg-type="none"]) {
    background-color: #1a1b1e !important;
}

/* Override any base template backgrounds */
.main-content:has(.server-detail-page[data-bg-type="gradient_dual"]),
.main-content:has(.server-detail-page[data-bg-type="gradient_dark"]),
.main-content:has(.server-detail-page[data-bg-type="pattern"]),
.main-content:has(.server-detail-page[data-bg-type^="texture_"]) {
    background-color: transparent !important;
    background: transparent !important;
}

.main-content:has(.server-detail-page[data-bg-type="solid"]),
.main-content:has(.server-detail-page:not([data-bg-type])) {
    background-color: var(--sd-bg-color) !important;
}

.main-content:has(.server-detail-page[data-bg-type="none"]) {
    background-color: #1a1b1e !important;
}

/* Row/col overrides for backgrounds */
.row.h-100.g-0:has(.server-detail-page[data-bg-type="gradient_dual"]) {
    background: linear-gradient(to right, 
        color-mix(in srgb, var(--sd-primary-color) 12%, var(--sd-bg-color)),
        color-mix(in srgb, var(--sd-secondary-color) 10%, var(--sd-bg-color))
    ) !important;
    min-height: 100vh;
}

.row.h-100.g-0:has(.server-detail-page[data-bg-type="gradient_dark"]) {
    background: linear-gradient(to right, 
        var(--sd-bg-color),
        color-mix(in srgb, var(--sd-primary-color) 15%, var(--sd-bg-color))
    ) !important;
    min-height: 100vh;
}

.row.h-100.g-0:has(.server-detail-page[data-bg-type="pattern"]),
.row.h-100.g-0:has(.server-detail-page[data-bg-type^="texture_"]) {
    background-color: var(--sd-bg-color) !important;
    min-height: 100vh;
    position: relative;
}

/* Stars pattern - apply gradient to row instead of main */
.row.h-100.g-0:has(.server-detail-page[data-bg-type="texture_stars"]) {
    background: linear-gradient(to bottom, #0d0d1a 0%, #1a1a2e 50%, #0d0d1a 100%) !important;
    min-height: 100vh;
    position: relative;
}

.col:has(.server-detail-page[data-bg-type="gradient_dual"]),
.col:has(.server-detail-page[data-bg-type="gradient_dark"]),
.col:has(.server-detail-page[data-bg-type="pattern"]),
.col:has(.server-detail-page[data-bg-type^="texture_"]) {
    background-color: transparent !important;
}

.row.h-100.g-0:has(.server-detail-page[data-bg-type="solid"]),
.row.h-100.g-0:has(.server-detail-page:not([data-bg-type])) {
    background-color: var(--sd-bg-color) !important;
}

.row.h-100.g-0:has(.server-detail-page[data-bg-type="none"]) {
    background-color: #1a1b1e !important;
}

.col:has(.server-detail-page[data-bg-type="solid"]),
.col:has(.server-detail-page:not([data-bg-type])) {
    background-color: var(--sd-bg-color) !important;
}

.col:has(.server-detail-page[data-bg-type="none"]) {
    background-color: #1a1b1e !important;
}

/* ========================================
   MINIMALIST THEME BUTTON FIXES
   Ensures buttons are visible with white primary color
   ======================================== */
.server-detail-page[data-theme-id="minimalist"] .server-actions .btn-primary,
.server-detail-page[data-theme-id="minimalist"] .btn-primary.join-server-btn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #1a1b1e !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3) !important;
}

.server-detail-page[data-theme-id="minimalist"] .server-actions .btn-primary:hover,
.server-detail-page[data-theme-id="minimalist"] .btn-primary.join-server-btn:hover {
    background: #e5e5e5 !important;
    border-color: #e5e5e5 !important;
    color: #1a1b1e !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
}

/* Also fix buttons when primary color is white (fallback for custom themes with white primary) */
.server-detail-page[data-card-style="sharp"] .server-actions .btn-primary:not([style*="background"]),
.server-detail-page[data-card-style="sharp"] .btn-primary.join-server-btn:not([style*="background"]) {
    /* Check if primary color would result in invisible buttons and override */
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #1a1b1e !important;
}

.server-detail-page[data-card-style="sharp"] .server-actions .btn-primary:hover:not([style*="background"]),
.server-detail-page[data-card-style="sharp"] .btn-primary.join-server-btn:hover:not([style*="background"]) {
    background: #e5e5e5 !important;
    border-color: #e5e5e5 !important;
    color: #1a1b1e !important;
}