@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* --- Root Variables (needed for auth pages) --- */
:root {
    --bg-color: #231f20;
    --bg-2-color: #332d2f;
    --text-color: #fff;
    --text-color-light: #C2C2C2;
    --text-silver: #C1C2C3;
    --text-color-muted: #FFFFFF60;
    --accent-color: #FF5533;
    --primary-color: #ff5533;
    --danger-color: #DC3545;
    --border-color: #FFFFFF1A;
    --font-roboto: 'Roboto', sans-serif;
    --font-inter: 'Inter', sans-serif;
    --font-work-sans: 'Work Sans', sans-serif;
    --border-radius-sm: 8px;
    --border-radius-md: 10px;
    --border-radius-lg: 32px;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #f7f7f7 inset; 
  -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
  -webkit-text-fill-color: #fff;            
  transition: background-color 5000s ease-in-out 0s; 
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {box-shadow: 0 0 0px 1000px #fff inset;-webkit-text-fill-color: #fff;}
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {background-color: #f7f7f7;color: #fff;-moz-box-shadow: 0 0 0px 1000px #f7f7f7 inset;}
.form-class input:-webkit-autofill {box-shadow: 0 0 0px 1000px #f7f7f7 inset;-webkit-text-fill-color: #fff;}

/* --- Auth Pages --- */
.auth_pages .full-height {height: 100vh;}
.auth_pages .form-container {max-width: 340px;width: 100%;color: #fff;}
.auth_pages .form-container input.form-control {height: 45px;box-shadow: none;}
.auth_pages .rounded-input, .auth_pages .rounded-left-input, .auth_pages .rounded-right-input {border: 2px solid #e0e0e0;}
.auth_pages .rounded-input {border-radius: var(--border-radius-sm);}
.auth_pages .rounded-left-input {border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);border-right: none;}
.auth_pages .rounded-right-input {border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;border-left: none;}
.auth_pages .signin-link, .auth_pages .terms-link {text-decoration: none;color: #f44336;}
.auth_pages .btn-signup {background-color: #f44336;color: white;border: none;border-radius: 50px;    font-weight: 400;height: 40px;font-size: 14px;font-family: 'Inter';}
.auth_pages .welcome-section{display: flex;flex-direction:column;justify-content: center;align-items: start;color: #fff;background-color: var(--bg-color);border-left: 1px solid var(--border-color);padding:20px; padding-left: 100px;}
.auth_pages .auth-form{display: flex;flex-direction:column;justify-content: center;align-items: end;background-color: var(--bg-color);padding:20px; padding-right: 100px;}
.auth_pages .welcome-content {max-width: 500px;text-align: left;}
.auth_pages .welcome-title {line-height: 1.2;font-size: 48px;font-weight: 600;font-family: var(--font-inter);}
.auth_pages .welcome-description {line-height: 1.6;font-size: 14px;font-family: var(--font-roboto);font-weight: 400;color: #d3d2d2;}
.auth_pages .user-count {line-height: 1.6;font-size: 14px;font-family: var(--font-roboto);font-weight: 500;color: #d3d2d2;}
.auth_pages .user-avatars .avatar {width: 45px;height: 45px;color: white;font-weight: bold;border: 3px solid white;z-index: 1;display: flex;align-items: center;justify-content: center;border-radius: 50%;margin-right: -0.5rem;}
.auth_pages .avatar-a {background-color: #ff9800;z-index: 4;}
.auth_pages .avatar-b {background-color: #4caf50;z-index: 3;}
.auth_pages .avatar-c {background-color: #9c27b0;z-index: 2;}
.auth_pages .avatar-d {background-color: #ff5722;z-index: 1;}
/*.auth_pages .form-control:focus {border-color: #2196F3;box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);}*/
.auth_pages .btn:focus {box-shadow: none;}
.auth_pages .form-check-input:checked {background-color: #f44336;border-color: #f44336;}
.auth_pages .form-check-input:focus {border-color: #f44336;box-shadow: 0 0 0 0.25rem rgba(244, 67, 54, 0.25);}
.auth_pages .form-label {color: #fff;font-weight: 500;}
.auth_pages .form-check-label {color: #fff;}
.auth_pages .validation-message {color: #dc3545 !important;font-size: 0.875rem;margin-top: 0.25rem;}

/* ensure inputs used on auth pages appear correctly */
.auth_pages input.form-control {background-color: var(--bg-color);color: #fff;border: 1px solid var(--border-color);font-size: 14px;font-weight: 400;font-family: var(--font-inter);}
.auth_pages input.form-control::placeholder {color: #a7a5a6;}
.auth_pages .password_input .btn{border-color: var(--border-color) !important;}
.auth_pages .password_input .btn i{color:#a7a5a6;}
.maintenance-container {min-height: 100vh;background-color: #231F20;display: flex;align-items: center;justify-content: center;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;padding: 2rem;}
.maintenance-content {text-align: center;max-width: 600px;width: 100%;}
.maintenance-content img {width: 70%;margin-bottom:30px;}
.maintenance-content .logo {width: 250px;position: absolute;left: 20px;top: 20px;}
.maintenance-text {color: white;}
.maintenance-text h1 {font-size: 2rem;font-weight: 600;margin: 0 0 1rem 0;color: white;}
.maintenance-text p {font-size: 1.1rem;margin: 0;opacity: 0.8;color: white;}

@media (max-width: 767.98px) {
    .maintenance-text h1 {font-size: 1.5rem;}
    .maintenance-text p {font-size: 1rem;}
    .auth_pages .welcome-section{display: none;}
    .auth_pages .auth-form{padding-right: 20px;align-items: center;}
}
@media (max-width: 480px) {
    .maintenance-container {padding: 1rem;}
    .maintenance-text h1 {font-size: 1.25rem;}
    .maintenance-text p {font-size: 0.9rem;}
}