/* ============================================================
   HRMS Theme — branded split-screen login (Oman HRM design)
   Applied on top of Odoo's real /web/login form.
   Fonts are loaded via the manifest <link> (web.assets_frontend).
   ============================================================ */
:root {
    --lg-brand: #007A3D;
    --lg-brand-strong: #005a2d;
    --lg-ink: #1a2e1f;
    --lg-ink-2: #3d5245;
    --lg-ink-3: #7a9182;
    --lg-ink-4: #a9b8ad;
    --lg-surface: #ffffff;
    --lg-surface-2: #fafafe;
    --lg-bg: #f4f6f4;
    --lg-line: #e2eae5;
    --lg-line-strong: #ccd9d1;
    --lg-font: 'Figtree', system-ui, sans-serif;
    --lg-display: 'Plus Jakarta Sans', system-ui, sans-serif;
}

body { background: var(--lg-bg); }

.lg-wrap {
    min-height: 100vh;
    display: flex;
    background: var(--lg-bg);
    font-family: var(--lg-font);
}

/* ---- brand panel (left) ---- */
.lg-brand {
    position: relative;
    overflow: hidden;
    flex: 0 0 46%;
    display: flex;
    flex-direction: column;
    padding: 48px 52px;
    color: #fff;
    background: linear-gradient(160deg, #004D26 0%, #007A3D 42%, #003D1E 100%);
}
.lg-brand::after {
    content: ""; position: absolute; top: -12%; right: -14%; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(219, 23, 27, .28), transparent 66%); pointer-events: none;
}
.lg-brand::before {
    content: ""; position: absolute; bottom: -22%; left: -14%; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 77, 38, .6), transparent 64%); pointer-events: none;
}
.lg-brand .logo { height: 34px !important; width: auto !important; max-width: 260px; display: block; position: relative; z-index: 2; }
.lg-brand .mid { margin-top: auto; margin-bottom: auto; position: relative; z-index: 2; max-width: 460px; }
.lg-brand .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font: 700 11.5px var(--lg-font); letter-spacing: .1em; text-transform: uppercase; color: #fff;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
    padding: 6px 13px; border-radius: 99px; white-space: nowrap;
}
.lg-brand h1 { font: 800 38px/1.12 var(--lg-display); letter-spacing: -.02em; margin: 22px 0 16px; }
.lg-brand h1 .hl { color: #a8e6c3; }
.lg-brand .lead { font-size: 15px; line-height: 1.6; opacity: .86; }
.lg-feats { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.lg-feat { display: flex; align-items: center; gap: 14px; }
.lg-feat .fi {
    width: 42px; height: 42px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .16);
}
.lg-feat .ft { font-weight: 700; font-size: 14.5px; }
.lg-feat .fd { font-size: 12.5px; opacity: .78; }
.lg-brand .foot { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; font-size: 12px; opacity: .74; }
.lg-brand .foot .b { display: flex; align-items: center; gap: 7px; }

/* ---- form side (right) ---- */
.lg-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 32px; position: relative; }
.lg-card { width: 100%; max-width: 392px; border: 0; background: transparent; }
.lg-card .mlogo { display: none; }
.lg-card h2 { font: 800 26px var(--lg-display); color: var(--lg-ink); letter-spacing: -.02em; margin: 0; text-align: center; }
.lg-card .hi { color: var(--lg-ink-3); font-size: 14px; margin-top: 6px; margin-bottom: 8px; text-align: center; }

/* map Odoo's login form onto the design */
.lg-card .oe_login_form { margin-top: 18px; }
.lg-card .oe_login_form label,
.lg-card .oe_login_form .form-label,
.lg-card .oe_login_form .col-form-label {
    display: block; font-size: 12.5px; font-weight: 600; color: var(--lg-ink-2); margin-bottom: 7px;
}
.lg-card .oe_login_form .mb-3,
.lg-card .oe_login_form .o_caps_lock_warning { margin-bottom: 15px !important; }

.lg-card .oe_login_form .form-control {
    height: 46px; border: 1.5px solid var(--lg-line-strong); border-radius: 12px;
    background: var(--lg-surface); font: 500 14px var(--lg-font); color: var(--lg-ink);
    padding: 0 14px 0 42px;
}
.lg-card .oe_login_form .form-control:focus {
    border-color: var(--lg-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-brand) 20%, transparent);
}
/* input icons */
.lg-card .oe_login_form input#login,
.lg-card .oe_login_form input[name="login"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%237d7a91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='2,6 12,13 22,6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 14px center;
}
.lg-card .oe_login_form input#password,
.lg-card .oe_login_form input[name="password"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%237d7a91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 14px center;
}
/* password show/hide button merge into the box */
.lg-card .oe_login_form .input-group { position: relative; }
.lg-card .oe_login_form .o_show_password {
    position: absolute; right: 1px; top: 1px; bottom: 1px; z-index: 5;
    border: 0 !important; background: transparent !important; color: var(--lg-ink-4) !important; border-radius: 12px;
}
.lg-card .oe_login_form .o_show_password:hover { color: var(--lg-ink-2) !important; }

/* submit */
.lg-card .oe_login_buttons { margin-top: 18px; }
.lg-card .oe_login_buttons .btn-primary {
    width: 100%; height: 48px; border: 0; border-radius: 12px;
    background: var(--lg-brand); color: #fff; font: 700 15px var(--lg-font);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--lg-brand) 34%, transparent);
}
.lg-card .oe_login_buttons .btn-primary:hover { background: var(--lg-brand-strong); transform: translateY(-1px); }
.lg-card .btn-link { color: var(--lg-brand); font-weight: 600; }

/* oauth providers as SSO buttons */
.lg-card .list-inline, .lg-card .o_auth_oauth_providers { margin-top: 14px; }
.lg-card .o_auth_oauth_providers a,
.lg-card a.btn-secondary {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 46px; border: 1.5px solid var(--lg-line-strong) !important; border-radius: 12px;
    background: var(--lg-surface) !important; color: var(--lg-ink) !important; font: 600 14px var(--lg-font); margin-top: 8px;
}
.lg-card .o_auth_oauth_providers a:hover { background: var(--lg-surface-2) !important; border-color: var(--lg-ink-4) !important; }

/* alerts */
.lg-card .alert { border-radius: 10px; font-size: 13px; }

/* responsive / no brand panel */
@media (max-width: 920px) {
    .lg-brand { display: none; }
    .lg-card .mlogo { display: block; height: 28px; margin-bottom: 26px; }
}