/* DrowsyCraft Management - SKY GLASS ULTIMATE (V7)
    Fixes: Vertical Sidebar Alignment + Global Input Styling
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono&display=swap');

:root {
    --bg-dark: #060709;
    --sidebar-bg: rgba(10, 12, 16, 0.85);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(135, 206, 235, 0.15);
    --accent-sky: #87CEEB;
    --accent-glow: rgba(135, 206, 235, 0.35);
    --text-main: #e1e1e6;
    --text-dim: #94a3b8;
    --glass-blur: blur(18px);
}

/* --- Base Override --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body, html { 
    font-family: 'Inter', sans-serif !important; 
    background: radial-gradient(circle at top right, #102030, var(--bg-dark)) !important;
    background-attachment: fixed !important;
    color: var(--text-main) !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.container { 
    display: grid !important; 
    grid-template-columns: 280px 1fr !important; 
    height: 100vh !important; 
    overflow: hidden !important;
}

/* --- SIDEBAR STRUCTURE --- */
.sidebar { 
    background: var(--sidebar-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-right: 1px solid var(--card-border) !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.sidebar-title { 
    flex-shrink: 0;
    padding: 2rem 1rem 1.5rem !important;
    color: var(--accent-sky) !important;
    font-size: 1.1rem !important; 
    font-weight: 800 !important; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    text-align: center;
    border-bottom: 2px solid var(--accent-sky) !important;
}

.navbar { 
    display: flex !important; 
    flex-direction: column !important; /* Forces vertical list */
    gap: 4px !important; 
    flex: 1 !important; 
    overflow-y: auto !important; 
    padding: 1rem !important;
}

/* --- BUTTON & NAV ITEM FIXES --- */
.nav-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.nav-group-items {
    display: flex !important;
    flex-direction: column !important; /* Critical Fix for the screenshot */
    gap: 2px !important;
    padding-left: 10px !important;
}

.nav-btn, .nav-group-btn {
    background: transparent !important;
    color: var(--text-dim) !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    border: none !important;
    width: 100% !important; /* Ensures items take full width */
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: block !important;
    cursor: pointer !important;
}

.nav-btn:hover, .nav-btn.active, .nav-group-btn:hover { 
    background: var(--accent-sky) !important; 
    color: #060709 !important; 
    transform: translateX(5px) !important;
}

/* Global Actions Buttons (Kick, Heal, etc) */
.action-btn, button:not(.nav-btn):not(.nav-group-btn) {
    background: var(--accent-sky) !important;
    color: #060709 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 700 !important;
    border: none !important;
}

/* --- INPUT BOX STYLING --- */
input[type="text"], input[type="number"], textarea, select { 
    background: rgba(0, 0, 0, 0.4) !important; 
    border: 1px solid var(--card-border) !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 10px 15px !important;
    width: 100% !important;
    margin: 5px 0 !important;
    outline: none !important;
}

input:focus { border-color: var(--accent-sky) !important; box-shadow: 0 0 10px var(--accent-glow) !important; }

/* --- CONTENT AREA --- */
.content { 
    height: 100vh !important;
    overflow-y: auto !important; 
    padding: 2.5rem !important; 
}

.tab { display: none !important; }
.tab.active { display: block !important; }

.card { 
    background: var(--card-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem;
}

/* --- TABLES --- */
table { width: 100%; border-collapse: separate !important; border-spacing: 0 8px !important; }
table th, table td { text-align: left !important; padding: 12px !important; }
table th { color: var(--accent-sky) !important; text-transform: uppercase; font-size: 0.7rem; }
table tr { background: rgba(255, 255, 255, 0.02) !important; }
table td:first-child { border-radius: 10px 0 0 10px; border-left: 1px solid var(--card-border) !important; }
table td:last-child { border-radius: 0 10px 10px 0; border-right: 1px solid var(--card-border) !important; }

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--accent-sky); border-radius: 10px; }