/* Authentication styles for CapTableau */

.auth-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
background-color: #FFFCF1; /* Cream */
}

.auth-container .card {
width: 100%;
max-width: 400px;
padding: 30px;
border-radius: 10px;
border: 1px solid rgba(82, 93, 86, 0.12);
box-shadow: 0 6px 20px rgba(82, 93, 86, 0.14);
background-color: #FFFFFF;
}

.login-branding {
display: flex;
justify-content: center;
margin-bottom: 20px;
padding: 14px;
border-radius: 12px;
background-color: #F5F2E8;
}

.login-brand-logo {
width: min(100%, 220px);
height: auto;
display: block;
}

.auth-container h2 {
margin-bottom: 24px;
text-align: center;
color: #525D56; /* Dark Grey */
font-weight: 600;
}

.auth-container .form-group {
margin-bottom: 16px;
}

.auth-container label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: #525D56; /* Dark Grey */
}

.auth-container input {
width: 100%;
padding: 10px 12px;
border: 1px solid #C8CEC9;
border-radius: 5px;
background-color: #FFFCF1; /* Cream */
color: #525D56; /* Dark Grey */
font-size: 16px;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
box-sizing: border-box;
}

.auth-container input:focus {
outline: none;
border-color: #478DCB; /* Blue */
background-color: #FFFFFF;
box-shadow: 0 0 0 3px rgba(71, 141, 203, 0.18);
}

.auth-container input::placeholder {
color: #8A938D;
}

.auth-container .btn {
width: 100%;
padding: 12px;
margin-top: 10px;
border: none;
border-radius: 5px;
background-color: #478DCB; /* Blue */
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition:
background-color 0.2s ease,
transform 0.1s ease,
box-shadow 0.2s ease;
}

.auth-container .btn:hover {
background-color: #57853E; /* Dark Green */
box-shadow: 0 3px 8px rgba(82, 93, 86, 0.18);
}

.auth-container .btn:active {
transform: translateY(1px);
}

.auth-container p {
margin-top: 20px;
text-align: center;
color: #525D56; /* Dark Grey */
}

.auth-container a {
color: #478DCB; /* Blue */
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}

.auth-container a:hover {
color: #57853E; /* Dark Green */
text-decoration: underline;
}

/* Error message */

.error-message {
color: #8A3F16;
margin-bottom: 16px;
padding: 10px 12px;
background-color: #FFF0DD;
border: 1px solid #EE9A1F; /* Orange */
border-radius: 5px;
text-align: center;
}

/* Authentication status indicator */

.auth-status {
position: fixed;
bottom: 20px;
left: 20px;
width: 12px;
height: 12px;
border-radius: 50%;
z-index: 9999;
}

.auth-status.authenticated {
background-color: #A7CF46; /* Light Green */
box-shadow: 0 0 8px rgba(167, 207, 70, 0.8);
}

.auth-status.not-authenticated {
background-color: #EE9A1F; /* Orange */
box-shadow: 0 0 8px rgba(238, 154, 31, 0.8);
}