@import url('theme.css');
body {
    background-image: url('../img/libra.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    margin: 0;
}
.vh-100 {
    height: 100vh;
}
/* Legacy single-column container (kept for compatibility) */
.login-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.container {
    position: relative;
    top: 10%;
    border-radius: 15px;
    width: 25%;
    box-shadow: -3px 1px 3px 1px #0b0e10ba;
    background: linear-gradient(
        rgba(159, 159, 182, 0.9),
        rgba(184, 184, 202, 0.8))
}
.logo {
    width: 100px;
    margin-bottom: 10px;
}
h2 {
    color: black;
    margin-bottom: 2rem;
    text-align: center;
}
.form-outline {
    width: 100%;
    margin-bottom: 0.5rem;
}
.form-control {
    height: 38px;
}
.btn {
    padding: 0.5rem;
    height: 38px;
}
.error-message {
    color: red;
    text-align: center;
    margin-top: 10px;
}

.form-label{
    color: black;
}

/* New two-panel login card styles */
.login-bg {
    padding: 20px;
}
.login-card {
    display: flex;
    width: 950px;
    max-width: 95vw;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.15);
    overflow: hidden;
}
.info-panel {
    flex: 1 1 50%;
    background: linear-gradient(135deg, rgba(41,92,162,0.95), rgba(30,52,90,0.95));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.info-inner { text-align: center; max-width: 360px; }
.info-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    margin-bottom: 12px;
}
.info-title { font-weight: 700; color: #fff; margin-bottom: 6px; text-align:center; }
.info-sub { opacity: 0.9; margin-bottom: 0; text-align:center; }

.form-panel {
    flex: 1 1 50%;
    padding: 40px 36px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.form-title { font-weight: 600; margin-bottom: 18px; color: #2d2d2d; }
.form-panel .form-control { height: 44px; }
.form-panel .btn-primary { height: 44px; border-radius: 6px; }

@media (max-width: 768px) {
    .login-card { flex-direction: column; }
    .info-panel, .form-panel { flex: 1 1 auto; }
}