/* =========================================
   MODERN AUTH REDESIGN (Centered Card)
   ========================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --bg-color: #f3f4f6;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --input-bg: #ffffff;
    --radius: 8px;
}

body {
    font-family: "Inter", sans-serif;
    background-color: var(--bg-color);
    /* Deep Blue/Slate Gradient */
    background-image: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 20px;
}

/* --- Card Style --- */
.auth-content {
    background: #1f2937; /* Dark Slate Background */
    width: 100%;
    max-width: 450px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* Stronger shadow for depth */
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #374151;
}

/* --- Branding inside Card --- */
.auth-brand {
    margin-bottom: 24px;
    text-align: center;
}

.auth-brand img {
    height: 48px; /* Adjustable */
    width: auto;
    margin-bottom: 12px;
}

.auth-brand span {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f3f4f6; /* Light text */
}

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

.auth-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f3f4f6; /* Light text */
    margin: 0 0 8px 0;
}

.auth-header p {
    color: #9ca3af; /* Muted light text */
    font-size: 0.95rem;
    margin: 0;
}

/* --- Form Elements --- */
.form-group {
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #e5e7eb; /* Light label */
    font-size: 0.9rem;
    text-align: left; /* Ensure labels are left aligned */
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #374151; /* Dark border */
    border-radius: var(--radius);
    font-size: 0.95rem;
    transition: all 0.2s;
    background-color: #111827; /* Very dark input bg */
    color: #f3f4f6; /* Light input text */
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper .form-control {
    padding-right: 40px; /* Space for eye icon */
}

.input-icon-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s;
}

.input-icon-toggle:hover {
    color: var(--text-color);
}

.btn-primary {
    width: 100%;
    padding: 12px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 8px rgba(37, 99, 235, 0.25);
}

.auth-links {
    display: flex;
    justify-content: flex-end; /* Right align specific links like forgot password */
    margin-top: 10px;
    width: 100%;
    font-size: 0.9rem;
}

.auth-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* Footer text needs to be light on dark bg, but here it is INSIDE spacing or OUTSIDE? 
   The logic in blade places footer inside .auth-content wrapper? 
   Wait, looking at blade: footer is INSIDE .auth-content in all files.
   So it should remain dark text on white card. 
   BUT standard copyright might be better outside or kept inside.
   Let's keep it inside for now as per previous design.
*/
.auth-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    width: 100%;
}

.auth-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

/* --- Alerts --- */
.alert {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: left;
}

.alert-danger {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* Dark Mode Overrides (if triggered by system/JS) */
.dark-mode body {
    background-color: #111827;
    background-image: none;
}

.dark-mode .auth-content {
    background-color: #1f2937;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.dark-mode .auth-header h1,
.dark-mode .auth-brand span,
.dark-mode .form-label,
.dark-mode .input-icon-toggle:hover {
    color: #f3f4f6;
}

.dark-mode .form-control {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark-mode .form-control:focus {
    border-color: var(--primary-color);
}