/* شاشة الدخول - مستوحاة من ملف هوية منزال.
   لوحتان معتمدتان: الكحلي مع الفضي، والنبيذي مع الذهبي. الزر يبدّل بينهما. */
:root{
  --lg-brand:#001F3F; --lg-accent:#B8860B; --lg-page:#FFFDF5;
  --lg-ink:#12222f; --lg-muted:#6a7681; --lg-line:#e4e2da; --lg-field:#cfd6dc;
  --lg-tint:rgba(0,31,63,.12); --lg-shadow:rgba(0,31,63,.10); --lg-chip:#f7f5ed;
  --lg-arch-op:.09;
}
html[data-palette="wine"]{
  --lg-brand:#4D0810; --lg-accent:#B8860B; --lg-page:#FFFBF4;
  --lg-ink:#2a1a1c; --lg-muted:#7b6a6c; --lg-line:#ece2d8; --lg-field:#ded0cc;
  --lg-tint:rgba(77,8,16,.12); --lg-shadow:rgba(77,8,16,.12); --lg-chip:#f9f2ea;
  --lg-arch-op:.08;
}
*{box-sizing:border-box}
body.login-body{margin:0;min-height:100vh;background:var(--lg-page);color:var(--lg-ink);
  font-family:'Almarai','IBM Plex Sans Arabic',Tahoma,sans-serif;-webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease}
.login-body input,.login-body select,.login-body button{font-family:inherit}

.lg-band{position:fixed;top:0;right:0;left:0;height:6px;z-index:5;
  background:linear-gradient(90deg,var(--lg-brand) 0 60%,var(--lg-accent) 60% 100%);transition:background .35s}
.lg-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.lg-bg svg{position:absolute;bottom:0;left:0;width:100%;height:340px;opacity:var(--lg-arch-op)}
.lg-bg path{stroke:var(--lg-brand);transition:stroke .35s}

.lg-watermark{position:absolute;left:-40px;bottom:12%;width:min(420px,34vw);opacity:.07;
  will-change:transform;animation:lg-drift 22s ease-in-out infinite alternate}
@keyframes lg-drift{
  from{transform:translate3d(0,0,0) rotate(-1.5deg)}
  to{transform:translate3d(26px,-30px,0) rotate(1.5deg)}
}

.lg-stage{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:78px 20px 128px}

.lg-corner{position:absolute;top:26px;display:inline-flex;align-items:center;gap:9px;height:42px;
  padding:0 16px 0 12px;border:1px solid var(--lg-line);border-radius:999px;background:#fff;color:var(--lg-brand);
  font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .35s}
.lg-corner:hover{background:var(--lg-chip)}
.lg-corner:focus-visible{outline:2px solid var(--lg-brand);outline-offset:2px}
.lg-corner i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--lg-brand);color:var(--lg-accent);transition:background .35s}
.lg-switch{left:28px}
.lg-theme{right:28px;padding:0 14px;gap:8px}
.lg-theme .dots{display:flex;gap:4px}
.lg-theme .dots b{width:11px;height:11px;border-radius:50%;display:block}
.lg-theme .d1{background:#001F3F}
.lg-theme .d2{background:#4D0810}

.lg-card{width:100%;max-width:412px;background:#fff;border:1px solid var(--lg-line);border-radius:20px;
  padding:32px 34px 26px;box-shadow:0 26px 60px var(--lg-shadow);transition:box-shadow .35s,border-color .35s}
.lg-card .mark{width:150px;margin:0 auto 20px;display:block}
.lg-hello{font-size:23px;font-weight:800;color:var(--lg-brand);margin:0 0 8px;line-height:1.55;text-wrap:balance;transition:color .35s}
.lg-hello span{color:var(--lg-accent)}
.lg-lead{font-size:13.5px;color:var(--lg-muted);margin:0 0 26px;line-height:2;text-wrap:pretty}

.lg-f{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.lg-f label{font-size:12.5px;font-weight:700;color:var(--lg-ink);opacity:.8}
.lg-f input,.lg-f select{height:48px;padding:0 15px;border:1px solid var(--lg-field);border-radius:10px;
  font-size:15px;background:#fff;color:var(--lg-ink);transition:border-color .15s,box-shadow .15s;width:100%}
.lg-f select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236a7681' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 15px center;padding-left:38px}
.lg-f input::placeholder{color:#aab4bd;font-weight:400}
.lg-f input:focus,.lg-f select:focus{outline:none;border-color:var(--lg-brand);box-shadow:0 0 0 3px var(--lg-tint)}
.lg-btn{width:100%;height:52px;border:none;border-radius:10px;background:var(--lg-brand);color:#fff;
  font-size:15.5px;font-weight:700;cursor:pointer;transition:filter .15s,background .35s}
.lg-btn:hover{filter:brightness(1.12)}
.lg-note{font-size:12px;color:var(--lg-muted);line-height:1.9;margin:16px 0 0;text-align:center}
.lg-flash{margin:0 0 16px;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:700;text-align:center}
.lg-flash.error{background:#fdecec;color:#8c1d1d}
.lg-flash.success{background:#eaf6ee;color:#1d6b38}
.lg-flash.info{background:var(--lg-chip);color:var(--lg-ink)}

.lg-contact{position:absolute;bottom:0;right:0;left:0;z-index:3;padding:0 16px 22px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.lg-c{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;background:#fff;
  border:1px solid var(--lg-line);border-radius:999px;text-decoration:none;color:var(--lg-ink);
  font-size:12.5px;font-weight:700;transition:border-color .15s,transform .15s,box-shadow .15s}
a.lg-c:hover{border-color:var(--lg-brand);transform:translateY(-1px);box-shadow:0 6px 16px var(--lg-tint)}
a.lg-c:focus-visible{outline:2px solid var(--lg-brand);outline-offset:2px}
.lg-c i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--lg-chip);color:var(--lg-brand);flex:none;transition:background .35s,color .35s}
.lg-c .v{direction:ltr;unicode-bidi:plaintext;letter-spacing:.02em;color:var(--lg-ink)}
.lg-c a,.lg-c a:visited{color:inherit;text-decoration:none}
.lg-c small{color:var(--lg-muted);font-weight:400;font-size:11.5px}

@media (max-width:760px){
  /* شريط التواصل في السياق الطبيعي لا مثبّتاً أسفل الشاشة: حين يكبر خط
     النظام أو يضيق العرض تلتفّ بطاقاته إلى أسطر، وكان يرتفع فوق بطاقة
     الدخول ويغطي الحقول. الآن يدفع الصفحة لأسفل بدل أن يركبها. */
  body.login-body{display:flex;flex-direction:column}
  .lg-stage{flex:1;min-height:0;padding:64px 16px 18px}
  .lg-contact{position:static;padding:0 16px 18px}
  .lg-card{padding:24px 20px 20px;border-radius:16px}
  .lg-card .mark{width:126px;margin-bottom:16px}
  .lg-hello{font-size:20px}
  .lg-lead{font-size:12.5px;margin-bottom:20px}
  .lg-corner{top:16px;height:36px;font-size:12px}
  .lg-switch{left:14px}
  .lg-theme{right:14px}
  .lg-bg svg{height:230px}
  .lg-watermark{width:250px;left:-70px;bottom:auto;top:7%;opacity:.055}
  .lg-contact{gap:6px}
  .lg-c{max-width:100%}
  .lg-c .v{overflow-wrap:anywhere}
  .lg-c{height:34px;font-size:11.5px;padding:0 11px 0 8px}
}
@media (prefers-reduced-motion:reduce){.login-body *{transition:none!important;animation:none!important}}

/* مدخل بوابة مشتركي منزال كلين داخل بطاقة الدخول */
.lg-clean-row{display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:18px;padding-top:15px;border-top:1px solid var(--lg-line)}
.lg-clean-row small{font-size:12.5px;color:var(--lg-muted)}
.lg-clean-row a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  height:40px;padding:0 18px 0 14px;border-radius:999px;background:#006875;color:#fff;
  font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,104,117,.25);
  transition:background .15s,transform .15s}
.lg-clean-row a:hover{background:#00545f}
.lg-clean-row a:active{transform:scale(.98)}
.lg-clean-row a:focus-visible{outline:2px solid #006875;outline-offset:3px}
.lg-clean-row a img{width:24px;height:24px;object-fit:contain}
.lg-home{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:13px;font-weight:700;color:var(--lg-muted);text-decoration:none}
.lg-home:hover{color:var(--lg-brand)}
.lg-home:focus-visible{outline:2px solid var(--lg-brand);outline-offset:3px;border-radius:6px}