/* Login screen — implements Figma "Shaeb HR (Copy)" node 21:664
   (fileKey koy7Gzk9vXge2M6VlKKt37). Values come from that file; change the
   Figma file and re-extract rather than editing here.
   Self-contained on purpose: the login page loads no hr.css (no shell, no
   DevExtreme), so the .ar/.en language toggle rules are repeated here and any
   shared-token change must be mirrored by hand. Fonts come from fonts.css. */

:root { color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }

body[data-lang="en"] { direction: ltr; }
body:not([data-lang="en"]) .en { display: none; }
body[data-lang="en"] .ar { display: none; }

body {
    font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    background: #fff;
}

/* The two panes keep the design's physical composition (form left, art right)
   in both cultures; only the form's content direction follows the language. */
.lg-page {
    --ink: #0e1321;
    --g800: #334155;
    --g600: #64748b;
    --g500: #94a3b8;
    --g400: #cbd5e1;
    --g300: #e2e8f0;
    --blue: #0065ff;
    --blue-hi: #2b7fff;
    --blue-soft: #b6d3ff;
    display: flex;
    min-height: 100vh;
    direction: ltr;
    background: #fff;
    color: var(--ink);
}

/* ---------- form pane ---------- */

.lg-pane-form {
    flex: 0 0 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-right: 1px solid var(--g400);
}

.lg-form {
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transform: translateY(-59px);
}
html[dir="rtl"] .lg-form { direction: rtl; }

.lg-logo { display: flex; align-items: flex-end; gap: 2px; padding-bottom: 24px; direction: ltr; }
.lg-bar { width: 12px; height: 24px; border-radius: 5px; background: var(--ink); }
.lg-bar-tall { height: 40px; }
.lg-dot-wrap { display: flex; padding-bottom: 12px; }
.lg-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--blue-hi); }

.lg-titles { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; width: 100%; text-align: center; }
.lg-titles h1 { font-size: 24px; line-height: 36px; font-weight: 700; color: var(--ink); }
.lg-titles p { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--g600); }

.lg-error {
    width: 100%; padding: 10px 14px; border: 1px solid #fecaca; border-radius: 12px;
    background: #fef2f2; color: #b91c1c; font-size: 12px; line-height: 18px;
}

/* an advisory, not a failure — accent-tinted (see hr.css .hr-note rationale) */
.lg-note {
    width: 100%; padding: 10px 14px; border: 1px solid rgba(0, 101, 255, .3);
    border-radius: 12px; background: rgba(0, 101, 255, .08); color: #0056d9;
    font-size: 12px; line-height: 18px;
}
.lg-hint { width: 100%; font-size: 11px; line-height: 16px; color: var(--g500); margin-top: -8px; }
.lg-row-links { font-size: 12px; }

.lg-success {
    width: 100%; padding: 10px 14px; border: 1px solid #bbf7d0; border-radius: 12px;
    background: #f0fdf4; color: #15803d; font-size: 12px; line-height: 18px;
}

/* OTP cells (Figma 19:586 / 20:628): the design's cell language at six digits.
   Digits read left-to-right in both cultures. */
.lg-otp { display: flex; gap: 8px; width: 100%; direction: ltr; }
.lg-otp input {
    flex: 1; min-width: 0; height: 62px;
    border: 1px solid var(--g400); border-radius: 14px; background: #fff;
    text-align: center; font-family: inherit; font-size: 22px; font-weight: 700;
    color: var(--ink); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.lg-otp input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

.lg-resend { width: 100%; font-size: 12px; line-height: 18px; color: var(--g800); text-align: center; }
.lg-resend button {
    border: none; background: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700; color: var(--blue);
}
.lg-resend button:disabled { color: var(--g500); cursor: default; }

a.lg-forgot { text-decoration: none; }

.lg-field {
    display: flex; align-items: center; gap: 16px;
    width: 100%; height: 62px;
    border: 1px solid var(--g400); border-radius: 16px; background: #fff;
    padding-inline-start: 16px; padding-inline-end: 20px;
    cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.lg-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 101, 255, .12); }
.lg-field-icon { width: 20px; height: 20px; flex: none; }
.lg-field-sep { width: 1px; height: 32px; background: var(--g400); flex: none; }
.lg-field-input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink);
}
.lg-field-input::placeholder { color: var(--g500); font-size: 11px; font-weight: 500; }
input[type="password"]::-ms-reveal { display: none; }
.lg-eye { border: none; background: none; padding: 0; cursor: pointer; flex: none; display: flex; }
.lg-eye img { width: 24px; height: 24px; }

.lg-row { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.lg-remember { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lg-remember-text { font-size: 12px; line-height: 18px; color: var(--g800); }
.lg-check {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; border: 1px solid var(--g400); border-radius: 8px;
    background: #fff; cursor: pointer; position: relative; flex: none;
}
.lg-check:checked { background: var(--blue); border-color: var(--blue); }
.lg-check:checked::after {
    content: ""; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.lg-forgot {
    border: none; background: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 12px; line-height: 18px; font-weight: 700; color: var(--blue);
}

.lg-submit {
    width: 100%; padding: 16px 10px; border: none; border-radius: 16px;
    background: var(--blue); color: #fff; cursor: pointer;
    font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600;
}
.lg-submit:hover { background: #0056d9; }
.lg-submit:focus-visible { outline: 3px solid rgba(0, 101, 255, .35); outline-offset: 2px; }

.lg-lang { font-size: 12px; color: var(--g600); text-decoration: none; }
.lg-lang:hover { color: var(--blue); text-decoration: underline; }

/* ---------- art pane ---------- */

/* Decorative collage; positions are the Figma frame coordinates minus the
   480px form pane. Kept LTR in both cultures — it is artwork, not content. */
.lg-pane-art { flex: 1; position: relative; overflow: hidden; min-width: 0; direction: ltr; }

/* The collage was composed on a 1024px-tall frame; keep that geometry pinned
   to the bottom so the tagline stays 40px off the bottom edge like the design,
   and shorter viewports crop only the decorative top. */
.lg-art-canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: 1024px; }

.lg-card {
    position: absolute;
    display: flex; flex-direction: column; gap: 16px;
    padding: 24px; background: #fff;
    border: 1px solid var(--g300); border-radius: 16px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .08);
}
.lg-card-title {
    font-family: "Beiruti", "Cairo", sans-serif;
    font-weight: 800; font-size: 24px; color: var(--ink);
    text-align: right; width: 100%;
}

.lg-card-chart {
    left: 486px; top: 180px; width: 227px; height: 176px;
    padding: 0; display: block; border-radius: 12px; overflow: hidden;
    box-shadow: 0 0 8px rgba(0, 0, 0, .08);
}
.lg-card-chart img { position: absolute; left: 16px; top: 56px; width: 193px; height: 102px; }

.lg-card-leaves { left: 239px; top: 494px; align-items: flex-start; }
.lg-card-leaves .lg-card-title { text-align: left; }
.lg-leave-rows { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.lg-leave-row { display: flex; gap: 8px; width: 100%; }
.lg-leave-row-short { width: auto; }
.lg-cell { width: 32px; height: 32px; border-radius: 8px; background: var(--g300); }
.lg-cell-on { background: var(--blue); }
.lg-cell-img { display: block; width: 32px; height: 32px; }
.lg-leaves-btn { position: absolute; left: -24px; top: 254px; width: 64px; height: 64px; }

.lg-card-pay { left: 538px; top: 376px; }
.lg-pills { display: flex; flex-direction: column; gap: 12px; }
.lg-pay-pill {
    width: 220px; display: flex; align-items: center; justify-content: flex-end; gap: 24px;
    padding: 10px 10px 10px 24px; border-radius: 999px; background: var(--g300);
}
.lg-pay-pill img { width: 40px; height: 40px; }
.lg-pay-bar { width: 103px; height: 12px; border-radius: 999px; background: var(--g500); opacity: .4; }
.lg-pay-pill.on { background: var(--blue); }
.lg-pay-pill.on .lg-pay-bar { background: var(--blue-soft); opacity: 1; }

.lg-card-att { left: 152px; top: 271px; }
.lg-att-row { display: flex; align-items: center; gap: 16px; }
.lg-att-row > img { width: 40px; height: 40px; }
.lg-att-avatar { position: relative; display: flex; }
.lg-att-avatar > img { width: 40px; height: 40px; }
.lg-att-avatar .lg-att-badge { position: absolute; left: 26px; top: -2px; width: 16px; height: 16px; }
.lg-att-pill { position: absolute; left: 23px; top: -21px; width: 120px; height: 40px; }

.lg-card-brand { left: 331px; top: 371px; gap: 24px; align-items: flex-end; }
.lg-brand-lockup { display: flex; align-items: flex-end; gap: 8px; }
.lg-wordmark { width: 56px; height: 23px; }
.lg-brand-bars { display: flex; align-items: flex-end; gap: 1.5px; padding-bottom: 2px; }
.lg-brand-bars .b { width: 6px; height: 14px; border-radius: 3px; background: var(--ink); }
.lg-brand-bars .b-tall { height: 24px; }
.lg-brand-bars .dw { display: flex; padding-bottom: 7.5px; }
.lg-brand-bars .d { width: 6px; height: 6px; border-radius: 999px; background: var(--blue-hi); }
.lg-skel { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.lg-skel span { display: block; height: 14px; border-radius: 999px; background: var(--g300); }
.lg-skel .w1 { width: 180px; }
.lg-skel .w2 { width: 120px; }
.lg-skel .w3 { width: 140px; }

.lg-tagline {
    position: absolute; right: 72px; bottom: 40px;
    text-align: right;
    font-family: "Beiruti", "Cairo", sans-serif;
    font-weight: 700; font-size: 44px; line-height: 56px; color: var(--ink);
}
.lg-tagline b { color: var(--blue); font-weight: 700; }

@media (max-width: 1100px) {
    .lg-pane-art { display: none; }
    .lg-pane-form { flex: 1; border-right: none; }
}
@media (max-height: 720px) {
    .lg-form { transform: none; padding: 24px 0; }
}