/* Login page standalone styles - aligned with company colors */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: #333;
    background: #f5f5f5;
}

:root {
    --primary-start: #007bff; /* company header gradient start */
    --primary-end: #0056b3;   /* company header gradient end */
    --muted: #6c757d;
    --border: #e9ecef;
}

.login-grid {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(340px, 440px) 1fr;
    background: #fff;
}

.login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 28px 20px;
    border-right: 1px solid var(--border);
}

.login-brand { display:flex; flex-direction: column; align-items:center; justify-content:center; text-align:center; gap: 10px; height: auto; margin: 10px 0 16px; }
.login-brand .logo { height: 100px; width: auto; margin-top: 10px; }
.login-lead { color:#6b7280; font-size: 13px; margin: 10px 0 18px; }

.login-card {
    margin-top: 12px;
    width: 100%;
    max-width: 360px;
}

/* Keep alerts aligned with the form width when centered */
.login-panel .alert { width: 100%; max-width: 360px; }

.form-group { margin-bottom: 12px; }
.form-label { display:block; font-weight: 700; margin-bottom: 6px; }

.input-row {
    position: relative;
}
.text-input {
    width: 100%;
    padding: 12px 40px 12px 12px;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.text-input:focus { border-color: #b6c2ff; background: #fff; }

.toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6c757d;
    padding: 6px;
    border-radius: 8px;
}
.toggle-password:hover { background:#f1f3f5; }

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-start), var(--primary-end));
    box-shadow: 0 6px 14px rgba(0, 123, 255, 0.25);
}
.btn-primary:hover { filter: brightness(1.03); }

.helper-row { display:flex; justify-content:center; margin-top: 10px; }
.helper-row a { color: var(--primary-start); text-decoration: none; font-size: 13px; }
.helper-row a:hover { text-decoration: underline; }

.copyright { margin-top: auto; color:#9aa0a6; font-size: 12px; text-align: center; }

.alert { padding:10px 12px; border-radius:10px; margin-bottom:12px; font-size:14px; }
.alert-success { background:#e6f4ea; color:#2e7d32; border:1px solid #c7e6ce; }
.alert-error { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }

.login-hero {
    background: #e9ecef center/cover no-repeat;
}
/* You can later set: .login-hero { background-image:url('/path/to/your/image.jpg'); } */

@media (max-width: 900px) {
    .login-grid { grid-template-columns: 1fr; }
    .login-panel { border-right: none; }
    .login-hero { display: none; }
}