/**
 * Server Detail - Above-fold styles extracted from inline <style>
 * These were previously inlined for FCP but are NOT CLS-critical for first paint.
 * Loaded async alongside server_detail.css.
 */

/* Lazy load transition */
.lazy-load{opacity:0.7;transition:opacity 0.3s ease}.lazy-load.loaded{opacity:1}
/* Sidebar/recommended icons */
.recommended-server-icon,.sidebar-server-image{border-radius:50%}
/* Compact social links */
.social-links-compact{display:flex;align-items:center;gap:0.5rem;margin-top:0.5rem}
.social-links-compact a{color:#9ca3af;font-size:1rem;width:28px;height:28px;display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:50%;background:rgba(255,255,255,0.05);transition:all 0.2s ease}
.social-links-compact a:hover{background:rgba(255,255,255,0.1);color:var(--sd-primary-color,#7d19ff)}
/* Admin page stats - under server name */
.admin-page-stats{text-align:left}
.admin-page-stats .page-stats-text{font-size:0.8rem;color:#9ca3af;display:inline-flex;align-items:center;gap:0.25rem}
/* Server tabs - Patreon-style centered links */
.server-tabs-nav{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;margin-top:0;padding-bottom:0.5rem}
.server-tab-link{color:#bdc3c7;text-decoration:none;font-weight:500;font-size:1rem;padding-bottom:0.5rem;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 0.2s,border-color 0.2s}
.server-tab-link:hover{color:var(--sd-text-color)}
.server-tab-link.active{color:var(--sd-primary-color,#7d19ff);border-bottom-color:var(--sd-primary-color,#7d19ff)}
/* Tab private icon */
.tab-private-icon{font-size:0.75rem;margin-left:0.25rem;opacity:0.6}
/* Premium link */
.premium-gradient-link{background:linear-gradient(135deg,#7d19ff 0%,#F4CA81 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:underline;cursor:pointer;font-weight:600}
/* Premium star */
.premium-star-detail{display:inline-block;margin-left:0.5rem;font-size:1.2rem;vertical-align:middle;cursor:help}
/* Share link button */
.share-link-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#e0e0e0;font-size:0.9rem;padding:0.5rem 0.85rem;cursor:pointer;border-radius:20px;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center}
.share-link-btn:hover{color:var(--sd-primary-color,#7d19ff);background:rgba(125,25,255,0.1);border-color:rgba(125,25,255,0.3)}
.share-link-btn.copied{color:#22c55e;border-color:rgba(34,197,94,0.3)}
.share-link-btn.copied i::before{content:"\f00c"}
.share-link-btn.dropdown-toggle::after{display:none}
/* Announcement cards */
.announcement-card{position:relative;padding:1rem;background:rgba(255,255,255,0.03);border-radius:8px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.06)}
.announcement-badge{position:absolute;top:0.75rem;right:0.75rem;font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--sd-primary-color,#7d19ff);background:rgba(125,25,255,0.15);padding:0.2rem 0.5rem;border-radius:4px}
.announcement-title{font-size:1rem;font-weight:600;margin-bottom:0.25rem;line-height:1.3}
.announcement-title-link{color:var(--sd-text-color,#fff);text-decoration:none}
.announcement-title-link:hover{color:var(--sd-primary-color,#7d19ff);text-decoration:underline}
.announcement-excerpt{font-size:0.875rem;margin:0;line-height:1.6;color:#9ca3af}
.announcement-excerpt.markdown-content p{margin-bottom:0.75rem;margin-top:0}
.announcement-excerpt.markdown-content p:first-child{margin-top:0}
.announcement-excerpt.markdown-content p:last-child{margin-bottom:0}
.announcement-excerpt.markdown-content ul,.announcement-excerpt.markdown-content ol{margin:0.75rem 0;padding-left:1.5rem}
.announcement-excerpt.markdown-content li{margin-bottom:0.5rem;line-height:1.6}
.announcement-excerpt.markdown-content li:last-child{margin-bottom:0}
.announcement-excerpt.markdown-content br{margin-bottom:0.5rem;display:block}
.announcement-excerpt.markdown-content img{max-width:100%!important;height:auto!important;display:block;margin:1rem auto;border-radius:8px;box-sizing:border-box}
.announcement-excerpt-wrap{overflow:hidden;max-height:9.6em;position:relative}
.announcement-excerpt-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2.5em;background:linear-gradient(transparent,rgba(43,45,49,0.98));pointer-events:none}
.announcement-read-full{display:inline-block;padding:0.25rem 0.5rem;font-size:0.75rem;margin-top:0.5rem;color:var(--sd-primary-color,#7d19ff)!important;border-color:var(--sd-primary-color,#7d19ff)!important;border-width:1px;line-height:1.2}
.announcement-read-full:hover{background:rgba(125,25,255,0.15)!important;color:var(--sd-primary-color,#7d19ff)!important}
.announcement-permalink{color:#9ca3af!important;text-decoration:none;font-size:0.8rem}
.announcement-permalink:hover{color:var(--sd-primary-color,#7d19ff)!important}
/* Skeleton loading */
.skeleton-event-card,.skeleton-announcement-card{background:rgba(255,255,255,0.05);border-radius:8px;padding:16px;margin-bottom:12px}
.skeleton-line{background:rgba(255,255,255,0.1);border-radius:4px;height:14px}
.skeleton-line-title{height:20px}
/* Analytics cards */
.analytics-card{background:rgba(30,33,40,0.6);border-radius:var(--sd-card-border-radius,12px);padding:1.5rem;margin-bottom:1.5rem;border:1px solid color-mix(in srgb,var(--sd-primary-color,#7d19ff) 20%,transparent);position:relative;overflow:hidden}
.analytics-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--sd-primary-color,#7d19ff) 40%,transparent),color-mix(in srgb,var(--sd-secondary-color,#F4CA81) 40%,transparent))}
.analytics-card h6{color:var(--sd-text-color,#fff);font-size:1rem;font-weight:600;margin-bottom:0.5rem}
.analytics-card .text-muted{color:#9ca3af!important;font-size:0.8rem}
/* Server description section */
.server-description{background:rgba(30,33,40,0.6);border-radius:var(--sd-card-border-radius,12px);padding:2rem;margin-bottom:1.5rem;border:1px solid color-mix(in srgb,var(--sd-primary-color,#7d19ff) 20%,transparent);position:relative;overflow:hidden}
.server-description::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--sd-secondary-color,#F4CA81) 40%,transparent),color-mix(in srgb,var(--sd-primary-color,#7d19ff) 40%,transparent))}
.server-description h2,.server-description .h5{color:var(--sd-text-color,#fff);font-size:1.25rem;font-weight:600}
.description-content{color:#e0e0e0;line-height:1.6}
.description-content p{margin-bottom:0.875rem}
/* Server tags */
.server-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.5rem}
.server-tag{background:#404040;color:#e0e0e0;padding:0.25rem 0.75rem;border-radius:6px;font-size:0.875rem;font-weight:500;border:1px solid #555;text-decoration:none}
.server-tag.primary-category{background:linear-gradient(135deg,var(--sd-primary-color,#7d19ff),color-mix(in srgb,var(--sd-primary-color,#7d19ff) 80%,white));color:#fff;border:none}
.server-tag.secondary-category{background:color-mix(in srgb,var(--sd-primary-color,#7d19ff) 20%,#1a1b1e);border-color:color-mix(in srgb,var(--sd-primary-color,#7d19ff) 30%,transparent);color:var(--sd-text-color,#fff)}
.server-tag.special-tag{background:linear-gradient(135deg,var(--sd-secondary-color,#F4CA81),color-mix(in srgb,var(--sd-secondary-color,#F4CA81) 80%,#000));color:#000;border:none}
/* Social links */
.social-links{display:flex;align-items:center;gap:1rem}
.social-links a{color:#bdc3c7;font-size:1.4rem;padding:0.5rem;border-radius:50%;background:rgba(255,255,255,0.05);width:40px;height:40px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.2s ease}
.social-links a:hover{background:rgba(255,255,255,0.1);color:var(--sd-primary-color,#7d19ff)}
/* Activity badges and data numbers */
.activity-badge{color:var(--sd-text-color,#fff);padding:0.5rem 1rem;border-radius:8px;font-size:0.85rem;font-weight:500;display:inline-flex;align-items:center;background:rgba(255,255,255,0.08)}
.activity-level-display{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.activity-metric{display:flex;flex-direction:column;align-items:flex-start}
.data-number{color:var(--sd-primary-color,#7d19ff);font-size:2rem;font-weight:800;line-height:1;margin-bottom:0.25rem}
.data-label{color:#9ca3af;font-size:0.8rem;font-weight:400;text-transform:lowercase}
.data-compound{display:flex;align-items:baseline;gap:0.5rem}
.data-compound .data-number{font-size:1.75rem;margin-bottom:0}
.data-compound .data-unit{color:#bdc3c7;font-size:1rem;font-weight:500}
/* Language tag */
.language-tag{display:inline-block;padding:0.5rem 1rem;border-radius:8px;font-size:0.9rem;font-weight:500;background:rgba(255,255,255,0.08);color:var(--sd-text-color,#fff)}
/* Managed by section */
.managed-by-section{display:flex;align-items:center;gap:0.5rem}
.admin-avatar-img{border-radius:50%}
/* Sidebar skeleton */
.sidebar-skeleton{padding:8px 0}
.skeleton-server-card{background:rgba(255,255,255,0.03);border-radius:8px;padding:12px}
/* CLS Prevention - reserve space for AJAX content */
#eventsContainer{min-height:150px!important}
#announcementsContainer{min-height:150px!important}
.sidebar-recommendations{min-height:400px!important}
#sidebarSkeletonSection,#sidebarRecommendedServersSection{position:relative}
#listingStatsChart{min-height:250px!important}
.chart-wrapper{min-height:250px!important}
/* CLS Prevention - aspect ratios */
.event-cover-image{aspect-ratio:16/9;overflow:hidden}
/* Sidebar images */
.sidebar-server-image,.recommended-server-icon{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}

/* ========== Mobile/Tablet responsive overrides ========== */
@media (max-width:480px){
    .server-actions{justify-content:center;width:100%;padding:0.5rem 0 0 0;gap:0.75rem}
    .admin-page-stats{text-align:center}
    .social-links-compact{justify-content:center}
    #eventsContainer{min-height:100px!important}
    #announcementsContainer{min-height:100px!important}
    .sidebar-recommendations{min-height:200px!important}
    .server-header{padding:0 0 0.5rem 0;margin-bottom:0.5rem}
    .hidden-page-content{padding:2rem 1.5rem}.hidden-page-title{font-size:1.5rem}.sad-cat-image{width:150px}
    .breadcrumb{padding:0.75rem 0;margin-top:1rem;margin-bottom:0.5rem;font-size:0.8rem;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:1rem}
    .social-links-compact a{width:24px;height:24px;font-size:0.85rem}
    .share-link-btn{font-size:0.8rem;padding:0.4rem 0.65rem}
    .admin-page-stats .page-stats-text{font-size:0.75rem}
    .analytics-card{padding:1rem;margin-bottom:1rem}
    .analytics-card h6{font-size:0.9rem}
    .analytics-card .text-muted{font-size:0.7rem}
    .server-description{padding:1.35rem 1rem;margin-bottom:1rem}
    .server-description h2,.server-description .h5{font-size:1.1rem}
    .description-content{font-size:0.9rem;line-height:1.55}
    .server-tags{gap:0.375rem}
    .server-tag{padding:0.2rem 0.5rem;font-size:0.75rem}
    .social-links{gap:0.5rem;margin-top:0.75rem}
    .social-links a{width:36px;height:36px;font-size:1rem}
    .data-number{font-size:1.5rem}
    .data-label{font-size:0.7rem}
    .data-compound .data-number{font-size:1.25rem}
    .data-compound .data-unit{font-size:0.9rem}
    .activity-badge{font-size:0.75rem;padding:0.375rem 0.75rem}
    .activity-level-display{gap:1rem}
    .server-tabs-nav{gap:1rem;margin-bottom:1rem;margin-top:0.35rem}
    .server-tab-link{font-size:0.9rem}
    .managed-by-section{margin-bottom:0.5rem}
    .managed-by-section small{font-size:0.75rem!important}
    .floating-icons-container{display:none!important}
    .analytics-card::before,.server-description::before{display:none}
    .analytics-card,.server-description{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (min-width:481px) and (max-width:768px){
    .server-actions{justify-content:center;width:100%;padding:0.75rem 0 0 0}
    .admin-page-stats{text-align:center}
    .social-links-compact{justify-content:center}
    .social-links-compact a{width:26px;height:26px;font-size:0.9rem}
    .admin-page-stats .page-stats-text{font-size:0.75rem}
    .server-tabs-nav{gap:1.5rem;margin-bottom:1.25rem;margin-top:0.5rem}
    .server-tab-link{font-size:0.95rem;padding-bottom:0.5rem}
    .managed-by-section{margin-bottom:0.75rem;font-size:0.8rem}
    .server-description{padding:1.5rem 1.25rem;margin-bottom:1.25rem}
    .server-description h2,.server-description .h5{font-size:1.15rem}
    .description-content{font-size:0.95rem;line-height:1.6}
    .description-content p{margin-bottom:0.875rem}
}