html, body { height: 100%; }

/* Make login fullscreen without affecting other pages */
body[data-path="login"] .page_content,
body[data-path="login"] .web-page-content,
body[data-path="login"] .container,
body[data-path="login"] .main-section,
body[data-path="login"] .layout-main-section-wrapper{
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide website navbar/footer on login (if any) */
body[data-path="login"] header,
body[data-path="login"] .navbar,
body[data-path="login"] footer,
body[data-path="login"] .web-footer{
  display: none !important;
}

.ls-login{
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 440px 1fr;
  background: #f6f7fb;
}

@media (max-width: 900px){
  .ls-login{ grid-template-columns: 1fr; }
  .ls-login__right{ display:none; }
}

.ls-login__left{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px 26px;
}

.ls-login__card{
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  padding: 26px 24px;
}

/* remove stock page-card look inside our card */
.ls-login__card .page-card{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ls-login__header{
  margin-bottom: 14px;
}

.ls-login__logo{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: contain;
  margin-bottom: 10px;
}

.ls-login__title{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color:#1f2937;
}

/* Inputs */
.ls-login__card .form-control{
  height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
}
.ls-login__card .form-control:focus{
  border-color:#1f6f63 !important;
  box-shadow: 0 0 0 4px rgba(31,111,99,.12) !important;
}

/* Buttons */
.ls-login__card .btn-login,
.ls-login__card .btn-ldap-login{
  height: 46px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #1f6f63, #0f4f49) !important;
}
.ls-login__card .btn-login:hover{ filter: brightness(1.03); }

/* Right hero panel */
.ls-login__right{
  position: relative;
  overflow: hidden;
  margin: 18px 18px 18px 0;
  border-radius: 24px;
  background:
    radial-gradient(1200px 600px at 50% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, #2e6f6a, #124f49);
}

.ls-login__right:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(25deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 55%);
  opacity:.9;
}

.ls-login__hero{
  position: relative;
  height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 64px 70px;
  color:#eaf4f2;
}

.ls-login__hero-title{
  font-size: 46px;
  line-height: 1.1;
  margin: 0 0 16px 0;
  font-weight: 800;
}

.ls-login__hero-sub{
  max-width: 560px;
  margin: 0 0 30px 0;
  opacity: .85;
}

.ls-login__footer{
  display:flex;
  align-items:center;
  gap: 14px;
  opacity: .85;
}

.ls-login__dots span{
  display:inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  background: rgba(0, 125, 255, .35);
  border: 2px solid rgba(0, 125, 255, .55);
}

.ls-login__by{ font-size: 12px; }
/* ===== RTL Support ===== */
.ls-login[dir="rtl"]{
  direction: rtl;
}

/* swap columns: login card on the RIGHT, hero on the LEFT */
.ls-login[dir="rtl"]{
  grid-template-columns: 1fr 440px;
}

.ls-login[dir="rtl"] .ls-login__left{
  grid-column: 2;
}

.ls-login[dir="rtl"] .ls-login__right{
  grid-column: 1;
  margin: 18px 0 18px 18px; /* بدل margin right */
}

/* text align for RTL */
.ls-login[dir="rtl"] .ls-login__hero,
.ls-login[dir="rtl"] .ls-login__header{
  text-align: right;
}

/* keep inputs LTR for emails if you want */
.ls-login[dir="rtl"] #login_email{
  direction: ltr;
  text-align: left;
}
/*.ls-login[dir="rtl"] .ls-login__hero{*/
  /*padding: 64px 70px 64px 70px; /* ثابت */
/*}*/
/* Center + Bigger Logo */
.ls-login__logo-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 12px;
}

.ls-login__logo{
  width: 88px !important;
  height: 88px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  margin: 0 !important;
  background: #fff; /* optional */
}
/* footer: stick to bottom + align items */
.ls-login__hero{
  position: relative;
}

.ls-login__footer{
  position: absolute;
  left: 70px;
  right: 70px;
  bottom: 52px;

  display: flex;
  align-items: center;
  justify-content: flex-start; /* start from left */
  gap: 18px;
}

/* keep dots at left too */
.ls-login__dots{
  display:flex;
  align-items:center;
}

/* Designed by next to dots (left side) */
.ls-login__by{
  font-size: 12px;
  opacity: .85;
}
.ls-login__top-actions{
  display:flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.ls-login__home-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  color: #0f4f49;
  background: rgba(15, 79, 73, 0.08);
  border: 1px solid rgba(15, 79, 73, 0.18);
}

.ls-login__home-btn:hover{
  background: rgba(15, 79, 73, 0.12);
}
.ls-login[dir="rtl"] .ls-login__top-actions{
  justify-content: flex-end;
}
.ls-login[dir="rtl"] .ls-login__home-fab{
  left: auto;
  right: 22px;
}

/* Floating Home Button (top of page) */
.ls-login__home-fab{
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 40px;
  padding: 0 14px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;
  text-decoration: none;

  color: #0f4f49;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,79,73,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}

.ls-login__home-fab:hover{
  background: #ffffff;
  border-color: rgba(15,79,73,.28);
}