/* Authentication Page Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*,
*::before,
*::after {
 box-sizing: border-box;
}

:root {
 --auth-primary: #0056b3;
 --auth-primary-hover: #004494;
 --auth-bg-gradient-start: #f8fbff;
 --auth-bg-gradient-end: #e6f0fa;
 --auth-card-bg: #ffffff;
 --auth-text-main: #333333;
 --auth-text-muted: #666666;
 --auth-border: #e0e0e0;
 --auth-input-focus: rgba(0, 86, 179, 0.1);
}

body.auth-page {
 font-family: 'Inter', sans-serif;
 margin: 0;
 padding: 0;
 background: linear-gradient(135deg, var(--auth-bg-gradient-start) 0%, var(--auth-bg-gradient-end) 100%);
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

.auth-container {
 width: 100%;
 max-width: 420px;
 padding: 20px;
}

.auth-container.wide {
 max-width: 900px;
}

.auth-card {
 background: var(--auth-card-bg);
 padding: 40px;
 border-radius: 16px;
 box-shadow: 0 10px 40px rgba(0, 50, 100, 0.08);
 /* Elegant soft blue shadow */
 border: 1px solid rgba(255, 255, 255, 0.8);
}

.auth-header {
 text-align: center;
 margin-bottom: 30px;
}

.auth-logo {
 height: 60px;
 margin-bottom: 20px;
 object-fit: contain;
}

.auth-title {
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--auth-text-main);
 margin-bottom: 8px;
}

.auth-subtitle {
 font-size: 0.9rem;
 color: var(--auth-text-muted);
}

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

.form-row {
 display: flex;
 gap: 20px;
 margin-bottom: 20px;
}

.form-row .form-group {
 flex: 1;
 margin-bottom: 0;
}

/* Responsive adjustment for mobile */
@media (max-width: 600px) {
 .form-row {
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
 }

 .form-row .form-group {
  margin-bottom: 20px;
 }
}

.auth-label {
 display: block;
 font-weight: 500;
 font-size: 0.9rem;
 color: var(--auth-text-main);
 margin-bottom: 8px;
}

.auth-input {
 width: 100%;
 padding: 12px 16px;
 border: 1px solid var(--auth-border);
 border-radius: 8px;
 font-size: 1rem;
 color: var(--auth-text-main);
 transition: all 0.3s ease;
 background-color: #fafafa;
}

.auth-input:focus {
 outline: none;
 border-color: var(--auth-primary);
 background-color: #fff;
 box-shadow: 0 0 0 4px var(--auth-input-focus);
}

.auth-btn {
 width: 100%;
 padding: 12px;
 background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
 color: #ffffff;
 border: none;
 border-radius: 8px;
 font-weight: 600;
 font-size: 1rem;
 cursor: pointer;
 transition: transform 0.2s, box-shadow 0.2s;
}

.auth-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 20px rgba(0, 86, 179, 0.25);
}

.auth-footer {
 text-align: center;
 margin-top: 24px;
 font-size: 0.9rem;
 color: var(--auth-text-muted);
}

.auth-link {
 color: var(--auth-primary);
 text-decoration: none;
 font-weight: 500;
 transition: color 0.2s;
}

.auth-link:hover {
 color: var(--auth-primary-hover);
 text-decoration: underline;
}

.auth-options {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
 font-size: 0.85rem;
}

.auth-checkbox-label {
 display: flex;
 align-items: center;
 gap: 6px;
 color: var(--auth-text-muted);
 cursor: pointer;
}

/* Alert Styles */
.alert {
 padding: 12px 16px;
 border-radius: 8px;
 margin-bottom: 20px;
 font-size: 0.9rem;
}

.alert-danger {
 background-color: #ffebee;
 color: #c62828;
 border: 1px solid #ffcdd2;
}

.alert-success {
 background-color: #e8f5e9;
 color: #2e7d32;
 border: 1px solid #c8e6c9;
}

/* Invalid Feedback */
.invalid-feedback {
 display: block;
 color: #c62828;
 font-size: 0.85rem;
 margin-top: 6px;
}

@media (max-width: 480px) {
 .auth-card {
  padding: 30px 20px;
 }
}