/* --- LOGIN PAGE SPECIFIC STYLES --- */

/* 1. Reset Body for Login Layout */
body {
    /* Remove 'display: flex' that was breaking the navbar alignment */
    display: block; 
    min-height: 100vh;
    background-color: var(--bg-dark); /* Use Variable */
    /* Remove padding-top, the navbar is sticky/fixed globally */
    padding-top: 0; 
}

/* 2. Main Wrapper to Center Content vertically */
/* We use a wrapper instead of body flex to avoid breaking navbar */
.login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-height)); /* Full height minus navbar */
    padding: 2rem 1rem;
}

/* 3. Login Container */
.login-container {
    width: 100%;
    max-width: 380px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.page-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 0.5rem; display: inline-block; }
.page-header h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--text-main); }
.page-header p { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.5rem; }

/* --- CARD --- */
.login-card {
    background: var(--bg-card); /* Use Variable */
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.75rem;
    /* Use variable shadow for light mode, custom for dark if needed */
    box-shadow: var(--card-shadow); 
    text-align: left;
}

.card-inner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

/* --- FORM ELEMENTS --- */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 500; color: var(--text-main); }

.input-wrapper { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 12px; color: var(--text-muted); font-size: 1rem; pointer-events: none; }

.custom-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.5rem;
    background: var(--input-bg); /* Use Variable */
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.9rem;
    transition: all 0.2s;
    outline: none;
}
.custom-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15); }

.password-toggle {
    position: absolute; right: 12px; color: var(--text-muted); cursor: pointer; transition: color 0.2s; font-size: 1rem;
}
.password-toggle:hover { color: var(--primary); }

.btn-full { width: 100%; padding: 0.75rem; font-size: 0.9rem; margin-top: 0.5rem; cursor: pointer; }

/* Error Message Style */
.error-msg {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: none; /* Hidden by default */
    align-items: center;
    gap: 6px;
}

/* --- FOOTER / DEMO --- */
.demo-box {
    margin-top: 1.25rem;
    background: rgba(2, 6, 23, 0.05); /* Subtle dark */
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.demo-badge { color: var(--primary); font-weight: 600; background: rgba(20, 184, 166, 0.1); padding: 1px 6px; border-radius: 4px; }

.footer-link { margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); }