



:root {



    /* Darker Theme Base */



    --bg-dark-start: #0d1117;



    --bg-dark-mid: #05080f;



    --bg-dark-end: #010409;



    --text-main: #c9d1d9;



    --text-heading: #f0f6fc;



    --text-muted: #8b949e;



    --container-bg: #161b22;



    --container-border: #30363d;







    /* Muted Accent Palette */



    --accent-primary: #58a6ff;



    --accent-primary-hover: #79c0ff;



    --accent-secondary: #8b949e;



    --accent-secondary-hover: #c9d1d9;







    /* Status Colors */



    --status-online: #22c55e; /* Tailwind green-500 */



    --status-degraded: #f59e0b; /* Tailwind amber-500 */



    --status-offline: #ef4444; /* Tailwind red-500 */



    --status-unknown: #6b7280; /* Tailwind gray-500 */



    --status-latency-color: var(--accent-primary); /* Color for latency line */











    /* Bubble Button */



    --bubble-bg-start: #21262d;



    --bubble-bg-end: #1a1f26;



    --bubble-border: #30363d;



    --bubble-text: var(--text-heading);



    --bubble-shadow-outer: 0 4px 10px rgba(0, 0, 0, 0.3);



    --bubble-shadow-inner: inset 0 1px 1px rgba(255, 255, 255, 0.05);



    --bubble-hover-bg-start: #30363d;



    --bubble-hover-bg-end: #282e35;



    --bubble-hover-shadow-outer: 0 6px 15px rgba(0, 0, 0, 0.4);







    /* Animation Timing */



    --transition-smooth: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);



     /* Navbar transition only for max-height */



    --transition-navbar: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1);



}











html, body {



    overflow-x: hidden;



    scroll-behavior: smooth;



}



/* Base body styling */



body {



    font-family: 'Poppins', sans-serif;



    background: linear-gradient(160deg, var(--bg-dark-start), var(--bg-dark-mid) 45%, var(--bg-dark-end));



    color: var(--text-main);



    min-height: 100vh;



    display: flex;



    flex-direction: column;



    overflow-x: hidden; /* Keep */



}







/* Minecraft-style font */



.font-minecraft {



    font-family: 'Press Start 2P', cursive;



    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);



}







.content-container.no-graph {



    padding-bottom: 0.5rem; /* Reduce bottom padding significantly when no graph */



    /* You might adjust this value (e.g., 0.25rem or even 0) depending on the look you want */



}







/* Simplified Container Style (Used for Status Cards) */



.content-container { /* Applied to status cards */



    background-color: var(--container-bg);



    border: 1px solid var(--container-border);



    border-radius: 0.75rem; /* Slightly less rounded */



    padding: 1rem 1.25rem; /* p-4 equivalent */



    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);



    transition: var(--transition-smooth);



    display: flex; /* Use flex for alignment */



    flex-wrap: wrap; /* Allow wrapping for graph */



    justify-content: space-between; /* Push latency/players to right */



    align-items: center; /* Vertically center top content */



    width: 100%; /* Cards take full width of their container */



}







/* Navbar Styling (Fixed Floating Bar - Adapted) - NO CHANGES HERE */



.navbar-floating {



    position: fixed; top: 1vh; left: 1rem; right: 1rem; z-index: 50;



    max-width: 100%; background-color: rgba(22, 27, 34, 0.85);



    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);



    border: 1px solid var(--container-border); padding: 0.6rem 1.5rem;



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); transition: var(--transition-navbar);



    overflow: hidden; max-height: 60px; /* Initial height */



}



.navbar-floating.is-open { max-height: 300px; /* Adjust as needed */ }



@media (max-width: 767px) { .navbar-floating { padding: 0.6rem 1rem; left: 1rem; right: 1rem; } }



@media (max-width: 639px) { .navbar-floating { max-height: 56px; } .navbar-floating.is-open { max-height: 200px; } }



.nav-link {



    color: var(--text-muted); padding: 0.4rem 0.7rem; border-radius: 9999px;



    transition: var(--transition-smooth); font-weight: 500; white-space: nowrap;



    font-size: 0.9rem; display: block; text-align: center; /* Mobile defaults */



}



@media (min-width: 640px) { .nav-link { display: inline-block; text-align: left; } }



.nav-link:hover {



    color: var(--text-heading); background-color: rgba(88, 166, 255, 0.15);



    transform: translateY(-1px) scale(1.02);



}



.navbar-logo-text { font-size: 1.05rem; }



@media (min-width: 768px) { .navbar-logo-text { font-size: 1.15rem; } }



#mobileNavLinks { margin-top: 0.75rem; padding-top: 0.75rem; }



.navbar-buttons-container { display: flex; align-items: center; gap: 0.5rem; }



#mobileMenuBtn, #scrollTopBtn {



    padding: 0.4rem 0.4rem !important; display: inline-flex; align-items: center;



    justify-content: center; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;



}



#mobileMenuBtn svg, #scrollTopBtn svg { width: 1rem; height: 1rem; transition: stroke 0.3s ease; }



#mobileMenuBtn:hover svg, #scrollTopBtn:hover svg { stroke: #ffffff; }



#scrollTopBtn {



    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;



    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px);



}



#scrollTopBtn.active-scroll { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }



@media (min-width: 640px) { #mobileMenuBtn { display: none !important; } }



.btn-bubble {



    background: linear-gradient(145deg, var(--bubble-bg-start), var(--bubble-bg-end));



    color: var(--bubble-text); border: 1px solid var(--bubble-border);



    border-radius: 9999px; padding: 0.6rem 1.2rem; font-weight: 600;



    text-decoration: none; display: inline-flex; align-items: center; justify-content: center;



    transition: var(--transition-smooth); box-shadow: var(--bubble-shadow-outer), var(--bubble-shadow-inner);



    position: relative; overflow: hidden; letter-spacing: 0.5px; cursor: pointer;



    font-size: 0.9rem;



}



.btn-bubble:hover {



    transform: translateY(-2px) scale(1.02);



    background: linear-gradient(145deg, var(--bubble-hover-bg-start), var(--bubble-hover-bg-end));



    border-color: #505864; box-shadow: var(--bubble-hover-shadow-outer), var(--bubble-shadow-inner);



    color: #ffffff;



}



.btn-bubble-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.3), var(--bubble-shadow-inner); }



.btn-bubble-sm:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.4), var(--bubble-shadow-inner); transform: translateY(-2px) scale(1.05); }







/* Footer styling */

/* Footer styling */
footer {
     margin-top: 6rem; padding-top: 3rem; padding-bottom: 3rem;
     background: var(--bg-dark-end); border-top: 1px solid var(--container-border);
     z-index: 9999;
}
footer ul { list-style: none; padding: 0; }
footer li { margin-bottom: 0.5rem; }
footer a { color: var(--text-muted); text-decoration: none; transition: var(--transition-smooth); display: inline-block; /* Fix for transform */ }
footer a:hover { color: var(--accent-primary); transform: translateX(3px); }
footer h4 { font-weight: 600; margin-bottom: 1rem; color: var(--text-heading); font-size: 1rem; }
.footer-logo-text { font-size: 1.1rem; }

/* Footer Status Capsule */
#footer-status-capsule {
    display: inline-flex; /* Use inline-flex to keep it on the same line if possible, or wrap naturally */
    align-items: center;
    background-color: var(--container-bg);
    border: 1px solid var(--container-border);
    border-radius: 9999px; /* Full capsule */
    padding: 0.3rem 0.8rem; /* Adjust padding as needed */
    margin-top: 0.75rem; /* Space above the capsule */
    box-shadow: var(--bubble-shadow-inner); /* Subtle inner shadow */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transitions */
    max-width: 100%; /* Prevent overflow on very small screens */
}

.footer-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.5rem; /* space-x-2 equivalent */
    flex-shrink: 0; /* Prevent dot from shrinking */
    box-shadow: 0 0 6px 1px currentColor; /* Glow effect using current text color */
    transition: background-color 0.3s ease;
}

/* Dot Color Classes */
.footer-status-dot.status-online { background-color: var(--status-online); color: var(--status-online); }
.footer-status-dot.status-degraded { background-color: var(--status-degraded); color: var(--status-degraded); }
.footer-status-dot.status-offline { background-color: var(--status-offline); color: var(--status-offline); }
.footer-status-dot.status-unknown { background-color: var(--status-unknown); color: var(--status-unknown); }
.footer-status-dot.status-loading { background-color: var(--text-muted); color: var(--text-muted); } /* Loading state */
.footer-status-dot.status-error { background-color: var(--status-unknown); color: var(--status-unknown); } /* Error state */

.footer-status-text {
    font-size: 0.8rem; /* Slightly smaller text */
    color: var(--text-muted);
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis if text is too long */
    font-weight: 500;
}
/* Optional: Style adjustments when status is not 'online' */
#footer-status-capsule.status-degraded { border-color: rgba(245, 158, 11, 0.4); }
#footer-status-capsule.status-offline { border-color: rgba(239, 68, 68, 0.4); }
#footer-status-capsule.status-error { border-color: rgba(107, 114, 128, 0.4); }






/* Main content padding */



.main-content {



    padding-top: calc(1vh + 80px);



    /* You might want slightly more bottom padding to ensure visual separation */



    padding-bottom: 3rem; /* Increased slightly */



    overflow-x: hidden;



    flex-grow: 1; /* Keep: This makes the main content take up available space */



}



@media (max-width: 639px) {



    .main-content {



        padding-top: calc(1vh + 70px);



        padding-bottom: 2.5rem; /* Adjusted proportionally */



    }



}







/* Search Input Styling */



#search_status {



    background-color: var(--container-bg);



    border: 1px solid var(--container-border);



    border-radius: 0.75rem;



    color: var(--text-main);



    padding: 0.75rem 1.25rem;



    width: 100%;



    margin-bottom: 1.5rem; /* mb-6 */



    font-size: 1rem;



    transition: border-color 0.3s ease, box-shadow 0.3s ease;



}



#search_status::placeholder {



    color: var(--text-muted);



    opacity: 0.8;



}



#search_status:focus {



    outline: none;



    border-color: var(--accent-primary);



    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3); /* Focus ring */



}







/* Category Group Styling */



.category-group {



    margin-bottom: 2.5rem; /* mb-10 */



    width: 100%;



}



.category-header {



    font-size: 1.5rem; /* text-2xl */



    font-weight: 700; /* font-bold */



    color: var(--text-heading);



    margin-bottom: 1rem; /* mb-4 */



    padding-bottom: 0.5rem; /* pb-2 */



    border-bottom: 1px solid var(--container-border);



}







/* Status Item (Card Wrapper) Styling */



.status-item {



    margin-bottom: 0.75rem; /* mb-3 - Space between cards */



    width: 100%;



     /* Add transition for smooth showing/hiding */



    transition: opacity 0.3s ease, max-height 1s ease; /* Allow more time for graph */



    overflow: hidden; /* Needed for max-height transition */



    max-height: 500px; /* Default max height, increased for graph */



}



 .status-item.hidden-item {



    opacity: 0;



    max-height: 0;



    margin-bottom: 0; /* Remove margin when hidden */



    padding-top: 0;



    padding-bottom: 0;



    border: none;



    pointer-events: none; /* Prevent interaction when hidden */



}











/* Status Card Content Alignment */



.status-card-top-content { /* Renamed for clarity */



    display: flex;



    align-items: center;



    justify-content: space-between; /* Push details to right */



    width: 100%; /* Take full width */



    flex-wrap: nowrap; /* Prevent wrapping of title/details */



    margin-bottom: 0.75rem; /* Space before graph/nodes */



}



.status-card-title { /* Wrapper for indicator and name */



     display: flex;



     align-items: center;



     flex-grow: 1; /* Allow title to take available space */



     margin-right: 1rem; /* Space between title and details */



}



.status-card-details {



    /* margin-left: auto; Removed, handled by justify-content on parent */



    display: flex;



    align-items: center;



    gap: 1rem; /* space-x-4 */



    font-size: 0.875rem; /* text-sm */



    color: var(--text-muted);



    text-align: right;



    flex-shrink: 0; /* Prevent details from shrinking */



}







/* Status Card Specific Styles */



.status-card h3 { /* Service Name */



    font-size: 1.125rem; /* text-lg */



    font-weight: 600; /* font-semibold */



    color: var(--text-heading);



    margin: 0; /* Remove default margin */



    word-break: break-word;



}



.status-indicator {



    display: inline-block;



    width: 10px;



    height: 10px;



    border-radius: 50%;



    margin-right: 0.6rem; /* mr-2.5 */



    flex-shrink: 0;



    box-shadow: 0 0 8px 1px currentColor;



}



.status-indicator.online { background-color: var(--status-online); color: var(--status-online); }



.status-indicator.degraded { background-color: var(--status-degraded); color: var(--status-degraded); }



.status-indicator.offline { background-color: var(--status-offline); color: var(--status-offline); }



.status-indicator.unknown { background-color: var(--status-unknown); color: var(--status-unknown); }







.status-card .latency span, .status-card .players span {



    font-weight: 500;



    color: var(--text-main);



    margin-left: 0.25rem;



}







/* Node List Styling (Inside Status Card) */



.node-list-container {



     flex-basis: 100%; /* Make node list take full width below main content */



     margin-top: 0.75rem; /* Add space above node list */



     padding-left: calc(0.6rem + 10px); /* Indent aligned with service name text */



     margin-bottom: 0.75rem; /* Space below nodes before graph (if any) */



}



.node-list {



    list-style: none;



    padding-left: 0.5rem;



    margin: 0;



    font-size: 0.875rem;



}



.node-list li {



    margin-bottom: 0.5rem; /* Increased spacing for graph */



    padding-left: 1.25rem;



    position: relative;



    color: var(--text-main);



}



.node-list li::before { /* Status indicator */



    content: ""; position: absolute; left: 0; top: 0.4em;



    transform: translateY(0%); width: 8px; height: 8px;



    border-radius: 50%; box-shadow: 0 0 6px 0px currentColor;



}



.node-online::before { background-color: var(--status-online); color: var(--status-online); }



.node-offline::before { background-color: var(--status-offline); color: var(--status-offline); }



.node-degraded::before { background-color: var(--status-degraded); color: var(--status-degraded); }



.node-unknown::before { background-color: var(--status-unknown); color: var(--status-unknown); }



.node-list .node-name { font-weight: 500; }



.node-list .node-status { color: var(--text-muted); margin-left: 0.25rem; }



.node-list .node-latency { color: var(--text-muted); margin-left: 0.5rem; font-size: 0.8rem;}







/* Node Graph Container */



.node-graph-container {



    width: 100%;



    height: 100px; /* Small height for node graphs */



    margin-top: 0.25rem; /* Space between node text and graph */



    position: relative; /* Needed for Chart.js canvas */



}







/* Main Service Graph Container */



.service-graph-container {



     flex-basis: 100%; /* Take full width */



     height: 100px; /* Adjust height as needed */



     margin-top: 0.5rem; /* Space above graph */



     position: relative; /* Needed for Chart.js canvas */



}



 /* Style for the canvas itself */



 .latency-chart-canvas {



     background-color: rgba(33, 38, 45, 0.3); /* Slightly lighter bg for contrast */



     border-radius: 0.375rem; /* rounded-md */



 }











/* Uptime Graph Placeholder (Historical - kept separate) */



#uptime-graph-container {



    background-color: var(--container-bg);



    border: 1px solid var(--container-border);



    border-radius: 1rem;



    padding: 1.5rem;



    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);



    min-height: 200px;



    display: flex;



    align-items: center;



    justify-content: center;



    color: var(--text-muted);



}







/* Loading Indicator */



#loading-indicator {



    color: var(--text-muted);



    text-align: center;



    padding: 2rem;



    font-size: 1.1rem;



}



 #loading-indicator svg {



    display: inline-block; width: 1.5em; height: 1.5em;



    margin-right: 0.5em; animation: spin 1.5s linear infinite;



    vertical-align: middle;



 }



 @keyframes spin {



    0% { transform: rotate(0deg); }



    100% { transform: rotate(360deg); }



 }