/* --- Global Styles --- */
body {
    background-color: #0e0e0e;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 50px 20px;
    display: flex;
    justify-content: center;
}

/* --- Main Layout Container --- */
.dashboard-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 25px; /* Space between the 3 main columns */
    align-items: flex-start; /* Allows columns to have different heights */
}

/* --- Column Width Controls --- */
/* This forces Column 1 (Stack), Column 2 (Status), and Column 3 (Plugins) to be identical widths */
.left-stack, 
.status-col, 
.plugin-col { 
    flex: 1; 
}

/* --- The Left Stack (Join + Data Packs) --- */
.left-stack {
    display: flex;
    flex-direction: column;
    gap: 25px; /* SPACE between Join Server and Data Pack boxes */
}

/* --- Universal Card Styling --- */
.card {
    background: #181818;
    border-radius: 12px;
    padding: 30px;
    border: 1px solid #2a2a2a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- Column 1: Join Info Styles --- */
.info-col { text-align: center; }
.ip-group { 
    background: #222; 
    padding: 15px; 
    border-radius: 10px; 
    margin: 15px 0; 
    border: 1px solid #333; 
}
.region-label { 
    font-size: 0.7em; 
    text-transform: uppercase; 
    color: #888; 
    letter-spacing: 1px; 
    margin-bottom: 5px; 
}
.ip-text { font-family: monospace; font-size: 1.05em; margin-bottom: 10px; display: block; }
.server-details { text-align: left; font-size: 0.85em; margin-top: 15px; opacity: 0.8; }

/* Buttons */
.btn { 
    display: inline-block; 
    width: 100%; 
    text-decoration: none; 
    padding: 12px 0; 
    border-radius: 6px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.2s; 
    border: none; 
    font-size: 13px; 
}
.copy-btn { background: #4CAF50; color: white; margin-bottom: 5px; }
.discord-btn { background: #5865F2; color: white; margin-top: 10px; }
.btn:hover { opacity: 0.9; transform: translateY(-2px); }

/* --- Column 2: Orange Status Styles --- */
.status-col { 
    background: #ff8c00; 
    color: #000; 
    text-align: center; 
}
.server-status-block { 
    margin-bottom: 30px; 
    padding-bottom: 15px; 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
}
.server-status-block:last-of-type { border-bottom: none; }
.status-header { font-size: 0.75em; text-transform: uppercase; font-weight: bold; opacity: 0.6; }
.status-val { font-size: 2.2em; font-weight: 900; margin: 10px 0; }
.player-count { font-weight: bold; font-size: 1.1em; }
.last-update { font-size: 0.7em; margin-top: 20px; opacity: 0.5; font-style: italic; }

/* --- Column 3: Plugins & Data Packs Shared Styles --- */
.plugin-header { 
    font-size: 1.3em; 
    font-weight: bold; 
    padding-bottom: 15px; 
    border-bottom: 1px solid #333; 
    margin-bottom: 15px; 
}

/* Plugin Rows */
.plugin-row { 
    display: flex; 
    justify-content: space-between; 
    padding: 8px 0; 
    border-bottom: 1px solid #252525; 
    font-size: 0.95em;
}
.version { color: #666; font-family: monospace; }

/* Data Pack Specifics */
.datapack-item {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #252525;
}
.datapack-name { color: #ff8c00; font-weight: bold; font-size: 1em; margin-bottom: 5px; }
.datapack-desc { color: #aaa; font-size: 0.85em; line-height: 1.4; }

/* --- Responsive (Mobile) --- */
@media (max-width: 1000px) {
    .dashboard-container { flex-direction: column; align-items: stretch; }
    .left-stack, .status-col, .plugin-col { flex: none; width: 100%; }
}