/* 1. Variables & Global Styles */
:root { 
    --sidebar-bg: #1a202c; 
    --main-bg: #f7fafc; 
    --primary-blue: #0d6efd;
    --text-muted: #a0aec0;
}

body { 
    background: var(--main-bg); 
    font-family: 'Inter', sans-serif; 
}

/* 2. Layout Components */
.sidebar { 
    width: 260px; 
    height: 100vh; 
    background: var(--sidebar-bg); 
    color: white; 
    position: fixed; 
    transition: 0.3s; 
    z-index: 1050; 
}

.main-content { 
    margin-left: 260px; 
    padding: 25px; 
    transition: 0.3s; 
}

/* 3. Navigation Links */
.nav-link { 
    color: var(--text-muted); 
    padding: 10px 20px; 
    border-radius: 8px; 
    margin: 4px 10px; 
    text-decoration: none; 
    display: block; 
    transition: 0.2s;
}

.nav-link:hover { 
    background: #2d3748; 
    color: var(--primary-blue) !important; 
}

.nav-link.active { 
    background: #2d3748 !important; 
    color: white !important; 
    border-right: 4px solid var(--primary-blue); /* เพิ่มจุดเด่นให้เมนูที่เลือก */
}

/* Sub-menu customization */
.small-menu .nav-link {
    font-size: 0.85rem;
    padding: 8px 15px;
    opacity: 0.8;
}

/* 4. Cards & Containers */
.card, .stat-card, .server-card, .card-table { 
    border: none; 
    border-radius: 15px; 
    background: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    transition: 0.3s;
}

.server-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 15px rgba(0,0,0,0.1); 
}

/* 5. UI Elements */
.progress { 
    height: 8px; 
    border-radius: 10px; 
    background-color: #edf2f7; 
}

.dot { 
    height: 10px; 
    width: 10px; 
    border-radius: 50%; 
    display: inline-block; 
    margin-right: 5px; 
}

.dot-online { background-color: #48bb78; box-shadow: 0 0 8px #48bb78; }
.dot-offline { background-color: #f56565; }

.form-label { font-weight: 600; font-size: 0.85rem; color: #555; }
textarea.form-control { font-family: monospace; font-size: 0.85rem; line-height: 1.6; }

/* 6. Specific Features (Upload, Icons, etc.) */
.upload-area {  
    border: 2px dashed #cbd5e0;  
    border-radius: 15px;  
    padding: 50px 20px;  
    text-align: center;  
    cursor: pointer;  
    transition: all 0.3s ease;
    background: #fdfdfd;
}
.upload-area:hover { border-color: var(--primary-blue); background: #f8faff; transform: translateY(-2px); }
.upload-area i { font-size: 3.5rem; color: var(--primary-blue); margin-bottom: 15px; }

[data-bs-toggle="collapse"] .transition-icon { transition: transform 0.3s ease; }
[data-bs-toggle="collapse"].collapsed .transition-icon { transform: rotate(-90deg); }

/* 7. Utilities & Responsiveness */
.search-box { max-width: 350px; }
#previewFrame { width: 100%; height: 450px; border: none; background: #000; border-radius: 8px; }
hr { margin: 0.5rem 0; }
/* สไตล์สำหรับลิงก์โปรไฟล์ */
    .p-3.text-center a {
        text-decoration: none; /* เอาเส้นใต้ชื่อออก */
        display: inline-block;
        color: #ffffff; /* สีเริ่มต้นของชื่อ */
    }

    /* สไตล์เริ่มต้นของรูปภาพ */
    .p-3.text-center a img {
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        display: block;
        margin: 0 auto;
    }

    /* เมื่อเอาเมาส์ไปชี้ที่ 'ลิงก์' ให้สั่งงานไปที่ 'รูปภาพ' เท่านั้น */
    .p-3.text-center a:hover img {
        transform: translateY(0) scale(1.1); /* ขยับขึ้นและขยายเฉพาะรูป */
        border-color: #4e73df !important;       /* เปลี่ยนสีขอบรูป */
        box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important; /* เพิ่มเงาใต้รูป */
    }

    /* ชื่อ (Span) จะไม่มี Transition และไม่มีการขยับ */
    #display-username {
        display: block;
        margin-top: 10px;
        font-weight: bold;
    }
@media (max-width: 991.98px) {
    .sidebar { margin-left: -260px; }
    .sidebar.active { margin-left: 0; }
    .main-content { margin-left: 0; }
}