@import url('https://fonts.googleapis.com/css2?family=M+PLUS+U:wght@100..900&display=swap');

.mplus-regular {
font-family: "M PLUS U", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

.mplus-bold {
font-family: "M PLUS U", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}

.mplus-black {
font-family: "M PLUS U", sans-serif;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal;
}

body {
margin: 0;
padding: 0;
min-height: 100vh;

background: linear-gradient(135deg, #61176e 0%, #142573 100%);
            
display: flex;
justify-content: center;

font-family: "M PLUS U", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: #d7d7d7;
}

a:link, a:visited {
color: #9060f2;    
}

a:hover {
color: #c6b3ed;    
}

.cf-turnstile {
display: flex;
justify-content: center;
margin: 0 auto 30px;
}

.main-panel {
width: 100%;
max-width: 1500px;
min-height: 100vh;
            
background-color: rgba(40, 40, 40, 0.95);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
padding: 40px;
box-sizing: border-box;

display: flex;
flex-direction: column; 
}

/* Compact login card wrapper */
.login-card {
width: 100%;
max-width: 400px;
background-color: #0f172a; /* Dark blue-gray */
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
border: 1px solid #334155; /* Muted gray border */

margin: auto;
}

.login-card h2 {
margin: 0 0 24px 0;
color: #f8fafc; /* Near white text */
font-size: 24px;
text-align: center;
font-weight: 700;
}

.login-card img {
display: block;
margin: 0 auto 20px;
width: 200px;
height: 200px;
border: 0;
}

/* Form grouping */
.form-group {
margin-bottom: 24px;
}

.form-group label {
display: block;
margin-bottom: 8px;
color: #94a3b8; /* Muted slate gray */
font-size: 14px;
}

/* Dark themed input fields */
.form-group input {
width: 100%;
padding: 12px 16px;
font-size: 16px;
background-color: #1e293b; /* Medium gray-blue */
border: 2px solid #334155;
border-radius: 8px;
color: #d7d7d7;
box-sizing: border-box;
transition: all 0.3s ease;
}

/* Glow effect on input focus using theme colors */
.form-group input:focus {
outline: none;
border-color: #6366f1; /* Bright dark-blue accent */
box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

/* High-contrast purple interactive button */
.login-btn {
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: 600;
color: #d7d7d7;
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); /* Deep blue to purple */
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.1s ease, filter 0.2s ease;
}

/* Interactive hover states */
.login-btn:hover {
filter: brightness(1.15);
}

.login-btn:active {
transform: scale(0.98);
}

/* Container that splits the sidebar and content horizontally */
.dashboard-wrapper {
    display: flex;
    flex: 1; /* Forces this wrapper to fill all remaining vertical height */
    width: 100%;
}

/* 300px Sidebar Panel */
.sidebar {
    width: 300px;
    min-width: 300px; /* Prevents the sidebar from shrinking */
    padding: 30px 20px;
    box-sizing: border-box;
}

/* Sidebar Navigation Items */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item {
    color: #94a3b8; /* Muted gray text */
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Theme accent states for interactive elements */
.menu-item:hover {
    background-color: #1e293b;
    color: #ffffff;
}

.menu-item.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); /* Purple/Blue gradient theme match */
    color: #ffffff;
}

.content-area {
    flex: 1;
    padding: 40px;
    color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Container for the image at the top of the sidebar */
.sidebar-brand {
    width: 100%;
    padding-bottom: 30px; /* Space between the image and the menu below it */
    margin-bottom: 10px;
}

/* Perfect horizontal centering for the sidebar image */
.sidebar-brand img {
    display: block;       /* Converts image to a block element */
    margin: 0 auto;       /* Calculates even space on left and right to center it */
    width: 200px;         /* Adjust the width as needed */
    height: 200px;        /* Adjust the height as needed */
    object-fit: cover;    /* Prevents the image from distorting if it's squished */
}

/* Container to hold and layout the text lines */
.brand-text-group {
    text-align: center;   /* Perfectly centers all text chunks inside */
    margin-top: 16px;     /* Distance from the bottom of the image */
}

/* Individual text chunk styling matching your gray/purple theme */
.brand-title {
    margin: 0 0 4px 0;
    color: #f8fafc;       /* Near white text */
    font-size: 18px;
    font-weight: 600;
}

.brand-subtitle {
    margin: 0 0 8px 0;
    color: #94a3b8;       /* Muted slate gray */
    font-size: 13px;
    font-weight: 400;
}