/* ============================================================================
   Inspira One ERP - Login screen
   New login UI integrated over the legacy Tat-Web login. - John - 05/07/2026
   Server drives direction (dir=rtl/ltr) + language; this file only styles.
   Original legacy styles kept in style.css (rollback: swap the <link> back).
   ============================================================================ */
:root{
  --navy-darkest:#070f38;--navy-dark:#09164a;--navy:#0d1f5c;--navy-mid:#152560;
  --navy-light:#1a2e6b;--navy-400:#1a4a9a;--blue-500:#2a7abf;--blue-400:#5aabdc;
  --blue-300:#6cc0e5;--blue-200:#89d2f0;--bg-panel:#f0f4fa;--bg-card:#ffffff;
  --text-900:#1e293b;--text-700:#374151;--text-500:#64748b;--text-300:#94a3b8;
  --border:#dde3ef;--success:#34d399;--error:#dc2626;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{min-height:100vh;display:flex;overflow-x:hidden;background:var(--navy-darkest);font-family:'IBM Plex Sans',Segoe UI,sans-serif;color:var(--text-900)}
html[dir=rtl] body{font-family:'Tajawal',Segoe UI,sans-serif;flex-direction:row-reverse}
html[dir=ltr] body{flex-direction:row}

/* ---- language pill (wraps the server LanguageSelector) ---- */
.lang-pill{position:fixed;top:.8rem;z-index:999;display:flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;border:1px solid rgba(90,171,220,.35);background:rgba(5,12,40,.75);backdrop-filter:blur(12px);color:rgba(255,255,255,.9);font-size:.74rem;font-weight:600}
html[dir=rtl] .lang-pill{right:1rem}html[dir=ltr] .lang-pill{left:1rem}
.lang-pill a,.lang-pill select{color:#fff;background:transparent;border:none;font:inherit;cursor:pointer}
.lang-pill a{text-decoration:none;opacity:.85}
.lang-pill a:hover{opacity:1}
.lang-pill select option{color:#111}

/* ---- divider ---- */
.divider{width:3px;flex-shrink:0;position:relative;z-index:10;background:linear-gradient(180deg,transparent,rgba(90,171,220,.15) 8%,var(--blue-400) 30%,var(--blue-500) 50%,var(--navy-light) 70%,rgba(26,46,107,.15) 92%,transparent)}

/* ============================ LEFT / branding =========================== */
.lpanel{position:relative;width:58%;min-height:100vh;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
#wc,#sc{position:absolute;inset:0;width:100%;height:100%;display:block}
#sc{pointer-events:none;z-index:1}
.loverlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(9,22,74,.5),rgba(7,15,56,.25) 60%,transparent)}
.lcontent{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem;gap:1.2rem;width:100%;max-width:560px}
.lwrap{position:relative;width:100%;max-width:300px;animation:float 6s ease-in-out infinite}
.lcard{position:relative;border-radius:20px;padding:1.3rem 1.6rem;overflow:hidden;background:#fff;border:2px solid rgba(90,171,220,.3);box-shadow:0 10px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
.lcard img{width:100%;height:auto;display:block}
.st,.sb{position:absolute;left:1.6rem;right:1.6rem;height:2px;border-radius:999px;z-index:4;background:linear-gradient(90deg,transparent,var(--navy-light),var(--blue-400),var(--navy-light),transparent)}
.st{top:0;animation:shl 3.5s ease-in-out infinite}.sb{bottom:0;animation:shl 3.5s ease-in-out infinite 1.75s}
.dline{width:10rem;height:1px;background:linear-gradient(90deg,transparent,rgba(90,171,220,.7),transparent)}
.tagline p:first-child{color:rgba(255,255,255,.92);font-weight:700;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase}
.tagline p:last-child{color:rgba(255,255,255,.55);font-size:.74rem;margin-top:.25rem;font-weight:300}

/* ---- module chips (HR icons / ERP icons) ---- */
.mods{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;max-width:520px}
.modchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;width:84px;padding:.7rem .4rem;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(90,171,220,.22);transition:transform .2s,background .2s,border-color .2s}
.modchip:hover{transform:translateY(-3px);background:rgba(90,171,220,.14);border-color:rgba(90,171,220,.5)}
.modchip img{width:26px;height:26px;display:block}
.modchip span{font-size:.66rem;font-weight:500;color:rgba(255,255,255,.8);line-height:1.15;text-align:center}
.mods-title{color:rgba(255,255,255,.6);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.2rem}

/* ---- mobile-app download QR (legacy _DownloadMobileApp restyled) ---- */
.appqr{margin-top:.4rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.9rem 1.1rem;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(90,171,220,.22);max-width:280px}
.appqr h3{color:rgba(255,255,255,.85);font-size:.74rem;font-weight:600;margin:0}
.appqr #qrcode{background:#fff;padding:8px;border-radius:10px;line-height:0}
.appqr #qrcode img{margin:auto;display:block}
.appqr .stores{display:flex;gap:.5rem;align-items:center;justify-content:center}
.appqr .stores img{height:34px;width:auto}
.sbar{position:absolute;bottom:1rem;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:.5rem;color:rgba(255,255,255,.4);font-size:.68rem;z-index:2}
.dpulse{width:5px;height:5px;border-radius:50%;background:var(--success);animation:dpls 2s ease-in-out infinite}

/* ============================ RIGHT / form ============================= */
.rpanel{width:42%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.25rem;overflow:auto;background:var(--bg-panel);background-image:radial-gradient(circle at 80% 10%,rgba(90,171,220,.07),transparent 50%),radial-gradient(circle at 15% 85%,rgba(26,46,107,.06),transparent 50%)}
.fwrap{width:100%;max-width:410px}
.card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.04),0 16px 48px rgba(26,46,107,.12),0 0 0 1px rgba(0,0,0,.05)}
.ctop{height:4px;background:linear-gradient(90deg,var(--navy) 0%,var(--blue-500) 40%,var(--blue-400) 70%,var(--navy) 100%)}
.cbody{padding:1.1rem 1.5rem 1rem}
.ilogo{display:flex;justify-content:center;margin-bottom:.5rem}
.ilogo img{width:70%;max-width:230px;height:auto;object-fit:contain}
.ctitle{font-size:1.15rem;font-weight:800;text-align:center;background:linear-gradient(135deg,var(--navy) 0%,var(--blue-500) 60%,var(--blue-400) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}
/* Bug#3 - Arabic title rendered light/thin via gradient-clip; force solid dark navy to match English - John - 08/07/2026 */
html[dir=rtl] .ctitle{font-size:1.15rem;font-weight:800;text-align:center;background:linear-gradient(135deg,var(--navy) 0%,var(--blue-500) 60%,var(--blue-400) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}
.csub{font-size:.78rem;color:var(--text-500);margin-top:.15rem;text-align:center}

/* headings emitted by legacy FlyoutLogin - hide the old raw <h1><h2> */
.content-wthree>h2,.main-agile>h1{display:none}
.circle-w3layouts{display:none}

/* ---- fields ---- */
#LoginForm{margin-top:.4rem}
.loginType{display:flex;justify-content:center;gap:.9rem;margin:.5rem 0 .2rem;font-size:.78rem;color:var(--text-700)}
.loginType label{display:flex;align-items:center;gap:.35rem;cursor:pointer}
.frow{margin-bottom:.6rem}
.flabel{display:block;font-size:.76rem;font-weight:600;color:var(--text-700);margin-bottom:.2rem;text-align:start}
.fwp{position:relative}
.ficon{position:absolute;top:50%;transform:translateY(-50%);color:var(--text-300);pointer-events:none;display:flex;z-index:2}
html[dir=rtl] .ficon{right:.8rem}html[dir=ltr] .ficon{left:.8rem}
.finput{width:100%;border-radius:8px;border:1.5px solid var(--border);font-size:.82rem;color:var(--text-900);outline:none;transition:border-color .25s,box-shadow .25s;background:linear-gradient(135deg,rgba(240,244,250,.9),rgba(255,255,255,.97));box-shadow:0 1px 3px rgba(26,46,107,.07)}
html[dir=rtl] .finput{padding:.6rem 2.4rem .6rem .85rem;text-align:right}
html[dir=ltr] .finput{padding:.6rem .85rem .6rem 2.4rem;text-align:left}
.finput::placeholder{color:#a0aec0}
.finput:focus{border-color:var(--blue-400);background:linear-gradient(135deg,rgba(240,248,255,.95),#fff);box-shadow:0 0 0 3px rgba(90,171,220,.18)}
.fwp:focus-within .ficon{color:var(--blue-400)}
/* password eye */
html[dir=rtl] .finput.weye{padding-left:2.4rem}html[dir=ltr] .finput.weye{padding-right:2.4rem}
.ebtn{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-300);display:flex;padding:0;z-index:2}
html[dir=rtl] .ebtn{left:.8rem}html[dir=ltr] .ebtn{right:.8rem}
.ebtn:hover{color:var(--blue-500)}
/* financial year dropdown / kendo + native selects */
.frow select,.frow .k-widget,.frow .k-dropdown{width:100%!important}
.frow select{border-radius:8px;border:1.5px solid var(--border);padding:.55rem .7rem;font-size:.82rem;background:#fff;color:var(--text-900)}

/* Bug#3 - let dir=rtl drive RTL layout natively; forced row-reverse caused awkward spacing - John - 08/07/2026 */
.rmeta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.2rem 0 .1rem}
.rlabel{display:flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none;font-size:.78rem;color:var(--text-500)}
.rlabel input{flex-shrink:0;margin:0}
.flink{font-size:.78rem;font-weight:600;color:var(--blue-500);text-decoration:none}
.flink:hover{color:var(--navy)}

/* validation / error blocks (legacy asp-validation markup) */
.message-error,.field-validation-error,.label-danger{display:block;font-size:.76rem;color:var(--error);background:#fef2f2;border:1px solid #fecaca;border-radius:7px;padding:.45rem .8rem;margin:.35rem 0}
.message-error:empty,.label-danger:empty{display:none;padding:0;margin:0;border:0}
/* Bug#3 - hide the empty validation-summary box + remove stray list bullets/dots before error text - John - 08/07/2026 */
.message-error.validation-summary-valid,.validation-summary-valid{display:none}
.message-error ul,.message-error ol{list-style:none;margin:0;padding:0}
.message-error li{list-style:none;margin:0}
html[dir=rtl] .message-error,html[dir=rtl] .label-danger{text-align:right}

/* submit */
.btn-login,.btnsi{width:100%;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.7rem 1rem;border-radius:9px;border:none;background:linear-gradient(135deg,var(--navy-400) 0%,var(--blue-500) 50%,var(--blue-400) 100%);box-shadow:0 4px 16px rgba(26,74,154,.35),inset 0 1px 0 rgba(255,255,255,.2);color:#fff;font-size:.9rem;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:.5rem}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,74,154,.42);color:#fff}
.btn-login .fa-spin{font-size:1rem}

/* or divider + register + footer */
.ordiv{display:flex;align-items:center;gap:.6rem;margin:.8rem 0}
.ordiv span{font-size:.74rem;color:var(--text-300)}
.oline{flex:1;height:1px;background:#e2e8f0}
.wthree-text{margin-top:.6rem}
.wthree-text ul{list-style:none;display:flex;justify-content:center}
.footer-w3l { /*position:fixed;*/
    margin-top: 1.5rem; /* Bug#3 - separate copyright from the card above - John - 08/07/2026 */
    width: 100%;
    text-align: center;
    color: var(--text-300);
    font-size: .68rem;
    z-index: 3
}
html[dir=ltr] .footer-w3l{right:0}html[dir=rtl] .footer-w3l{left:0}
.cfoot{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1.5rem;background:#f8faff;border-top:1px solid #eef1f8}
html[dir=rtl] .cfoot{flex-direction:row-reverse}
.fsec{display:flex;align-items:center;gap:.35rem;font-size:.66rem;color:var(--text-300);font-weight:500}
.dsm{width:5px;height:5px;border-radius:50%;background:var(--success)}

/* ================= 2FA authentication QR modal (restyled) ============== */
/* legacy Kendo window content #QRWindow > .qr-content */
#QRWindow .qr-content{text-align:center;padding:.5rem .4rem}
#QRWindow .qr-content h3{font-size:1rem;font-weight:800;color:var(--navy);margin-bottom:.35rem}
#QRWindow .qr-content p{font-size:.8rem;color:var(--text-500);margin-bottom:.8rem}
#qrCodeDisplay{display:inline-block;padding:12px;background:#fff;border:2px solid rgba(90,171,220,.35);border-radius:14px;box-shadow:0 8px 30px rgba(26,46,107,.18)}
#qrCodeDisplay img,#qrCodeDisplay canvas{display:block;margin:auto}
.qr-buttons{display:flex;gap:.6rem;justify-content:center;margin-top:1rem}
.qr-buttons button{padding:.5rem 1rem;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--navy);font-weight:600;font-size:.8rem;cursor:pointer;transition:all .2s}
.qr-buttons #enterOtpBtn{background:linear-gradient(135deg,var(--navy-400),var(--blue-500));color:#fff;border:none}
.qr-buttons button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,46,107,.18)}

/* ============================ animations =============================== */
@keyframes float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@keyframes shl{0%,100%{opacity:.2;transform:scaleX(.6)}50%{opacity:1;transform:scaleX(1)}}
@keyframes dpls{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================ responsive ============================== */
@media(max-width:1280px){.lpanel{width:54%}.rpanel{width:46%}.footer-w3l{width:46%}}
@media(max-width:1024px){.lpanel{width:50%}.rpanel{width:50%}.footer-w3l{width:50%}.lwrap{max-width:230px}}
@media(max-width:900px){
  body{flex-direction:column!important;height:auto;overflow-y:auto}
  .lpanel,.rpanel{width:100%;min-height:auto}
  .lpanel{padding:2rem 1rem 2.5rem}
  .rpanel{padding:1.5rem 1rem 3rem}
  .divider{width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--blue-400),var(--navy-light),var(--blue-400),transparent)}
  .fwrap{max-width:460px;margin:0 auto}
  .footer-w3l{position:static;width:100%;margin-top:1rem}
  .sbar{position:static;margin-top:1rem}
  .lang-pill{top:.6rem}
}
@media(max-width:480px){
  .lwrap{max-width:180px}.tagline{display:none}
  .modchip{width:72px}.modchip img{width:22px;height:22px}
  .cbody{padding:1rem 1.1rem}.ctitle{font-size:1.05rem}
  .appqr{max-width:100%}
}