/* ============================================================
   ULIS 5 LOGIN VISUAL R2
   Enterprise Split Card
   Presentation only — no Auth / MFA logic changes.
   ============================================================ */

html,
body,
#root {
  width:100%;
  min-width:100%;
  min-height:100%;
  margin:0;
}

body {
  overflow-x:hidden;
}


/* ============================================================
   PAGE CANVAS
   ============================================================ */

.login-screen {
  box-sizing:border-box !important;

  width:100% !important;
  min-height:100vh !important;
  min-height:100dvh !important;

  display:grid !important;

  grid-template-columns:
    minmax(460px, 520px)
    minmax(500px, 560px) !important;

  grid-template-rows:auto !important;

  justify-content:center !important;
  align-content:center !important;
  align-items:stretch !important;

  column-gap:0 !important;
  row-gap:0 !important;
  gap:0 !important;

  padding:32px !important;
  margin:0 !important;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(64, 196, 205, .12),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 88%,
      rgba(42, 158, 182, .10),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #062d47 0%,
      #08415f 46%,
      #0d5a7e 100%
    ) !important;

  overflow-x:hidden !important;
}


/* ============================================================
   SINGLE CARD — LEFT AUTH SIDE
   ============================================================ */

.login-card {
  box-sizing:border-box !important;

  grid-column:1 !important;
  grid-row:1 !important;

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  min-height:548px !important;

  display:flex !important;
  flex-direction:column !important;

  justify-content:center !important;

  margin:0 !important;

  padding:
    42px
    50px
    40px !important;

  border:0 !important;

  border-radius:
    26px
    0
    0
    26px !important;

  background:#ffffff !important;

  box-shadow:
    -8px 24px 65px rgba(0, 22, 38, .24),
    0 4px 16px rgba(0, 22, 38, .07) !important;

  position:relative !important;
  z-index:2 !important;
}


/* Arabic RTL side */
html[dir="rtl"] .login-card,
html[lang="ar"] .login-card {
  direction:rtl !important;
}


/* ============================================================
   AUTH HEADER
   ============================================================ */

.login-top {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;

  gap:18px !important;

  margin:
    0
    0
    30px !important;

  padding:0 !important;
}


.login-top h2 {
  margin:0 !important;
  padding:0 !important;

  color:#0b3b55 !important;

  font-size:32px !important;
  line-height:1.15 !important;

  font-weight:800 !important;

  letter-spacing:-.02em !important;
}


.login-top .lang {
  appearance:none !important;

  border:0 !important;
  outline:0 !important;

  background:transparent !important;

  color:#1699aa !important;

  font-size:14px !important;
  font-weight:800 !important;

  line-height:1.3 !important;

  padding:
    6px
    2px !important;

  margin:0 !important;

  cursor:pointer !important;
}


/* ============================================================
   FORM
   ============================================================ */

.login-card .field {
  display:flex !important;
  flex-direction:column !important;

  gap:7px !important;

  width:100% !important;

  margin:
    0
    0
    17px !important;
}


.login-card .field > span,
.login-card label > span {
  color:#244c61 !important;

  font-size:13px !important;
  line-height:1.4 !important;

  font-weight:700 !important;
}


.login-card input {
  box-sizing:border-box !important;

  width:100% !important;

  min-height:50px !important;

  padding:
    11px
    13px !important;

  border:
    1px solid
    #cbdce4 !important;

  border-radius:10px !important;

  outline:none !important;

  background:#fff !important;

  color:#173f53 !important;

  font-size:15px !important;

  box-shadow:none !important;

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease !important;
}


.login-card input:hover {
  border-color:#a9c4d0 !important;
}


.login-card input:focus {
  border-color:#1e9caf !important;

  box-shadow:
    0 0 0 3px
    rgba(30, 156, 175, .12) !important;
}


.login-card .password-input-wrap {
  display:flex !important;

  align-items:stretch !important;

  width:100% !important;

  min-height:50px !important;

  overflow:hidden !important;

  border-radius:10px !important;
}


.login-card .password-input-wrap input {
  flex:1 1 auto !important;

  min-width:0 !important;

  border-radius:
    0
    10px
    10px
    0 !important;
}


.login-card .password-visibility-toggle {
  flex:0 0 76px !important;

  border:
    1px solid
    #cbdce4 !important;

  border-inline-end:0 !important;

  border-radius:
    10px
    0
    0
    10px !important;

  background:#f5f9fa !important;

  color:#14506a !important;

  font-size:13px !important;
  font-weight:800 !important;

  cursor:pointer !important;
}


/* ============================================================
   SECURITY POLICY TEXT
   ============================================================ */

.login-card .login-lock-policy {
  display:block !important;

  width:100% !important;

  margin:
    -1px
    0
    18px !important;

  color:#718590 !important;

  font-size:11.5px !important;
  line-height:1.65 !important;

  font-weight:500 !important;
}


/* ============================================================
   PRIMARY BUTTON
   ============================================================ */

.login-card .full-button,
.login-card .primary.full-button {
  width:100% !important;

  min-height:50px !important;

  margin-top:2px !important;

  border:0 !important;

  border-radius:10px !important;

  background:
    linear-gradient(
      135deg,
      #0d607b,
      #087992
    ) !important;

  color:#fff !important;

  font-size:16px !important;
  line-height:1 !important;

  font-weight:800 !important;

  box-shadow:
    0 8px 20px
    rgba(8, 95, 122, .18) !important;

  cursor:pointer !important;
}


.login-card .full-button:hover,
.login-card .primary.full-button:hover {
  filter:brightness(1.04) !important;
}


/* ============================================================
   BRAND SIDE — RIGHT HALF OF SAME CARD
   ============================================================ */

.login-brand {
  box-sizing:border-box !important;

  grid-column:2 !important;
  grid-row:1 !important;

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  min-height:548px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;

  padding:
    46px
    54px
    38px !important;

  text-align:center !important;

  color:#fff !important;

  border-radius:
    0
    26px
    26px
    0 !important;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(91, 219, 219, .18),
      transparent 30%
    ),
    linear-gradient(
      150deg,
      #0a405f 0%,
      #0c5878 55%,
      #137895 100%
    ) !important;

  box-shadow:
    8px 24px 65px rgba(0, 22, 38, .24),
    0 4px 16px rgba(0, 22, 38, .07) !important;

  position:relative !important;
  z-index:1 !important;

  overflow:hidden !important;
}


/* decorative light */
.login-brand::before {
  content:"" !important;

  position:absolute !important;

  width:310px !important;
  height:310px !important;

  border-radius:50% !important;

  top:-175px !important;
  right:-135px !important;

  background:
    rgba(255,255,255,.055) !important;

  pointer-events:none !important;
}


/* ============================================================
   BRAND LOGO
   ============================================================ */

.platform-login-logo {
  display:block !important;

  box-sizing:border-box !important;

  width:168px !important;
  height:78px !important;

  max-width:168px !important;
  max-height:78px !important;

  object-fit:contain !important;
  object-position:center !important;

  margin:
    0
    auto
    26px !important;

  padding:
    9px
    15px !important;

  border:
    1px solid
    rgba(255,255,255,.55) !important;

  border-radius:14px !important;

  background:#fff !important;

  box-shadow:
    0 10px 24px
    rgba(0, 24, 42, .17) !important;
}


/* ============================================================
   PRODUCT TITLE — FORCE EXACTLY ONE LINE
   ============================================================ */

.login-brand .product-title {
  display:block !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  font-size:0 !important;
  line-height:1 !important;

  white-space:nowrap !important;

  color:#fff !important;
}


.login-brand .product-title::after {
  content:"ULIS 5" !important;

  display:block !important;

  width:100% !important;

  color:#fff !important;

  font-family:
    ui-monospace,
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace !important;

  font-size:57px !important;
  line-height:1 !important;

  font-weight:800 !important;

  letter-spacing:-.045em !important;

  white-space:nowrap !important;

  text-align:center !important;
}


/* ============================================================
   PRODUCT DESCRIPTION
   ============================================================ */

.login-brand > p {
  display:block !important;

  width:100% !important;
  max-width:440px !important;

  margin:
    20px
    auto
    0 !important;

  padding:0 !important;

  color:
    rgba(255,255,255,.94) !important;

  font-size:19px !important;
  line-height:1.65 !important;

  font-weight:500 !important;

  text-align:center !important;

  white-space:normal !important;
}


/* ============================================================
   SIGNATURE — FORCE ONE LINE
   ============================================================ */

.login-brand .product-signature {
  display:block !important;

  width:100% !important;

  margin:
    16px
    auto
    0 !important;

  padding:0 !important;

  font-size:0 !important;
  line-height:1 !important;

  white-space:nowrap !important;
}


.login-brand .product-signature::after {
  content:"USYS · Ultra Solutions" !important;

  color:
    rgba(255,255,255,.96) !important;

  font-size:14px !important;
  line-height:1.4 !important;

  font-weight:800 !important;

  letter-spacing:.01em !important;

  white-space:nowrap !important;
}


/* ============================================================
   OWNER LINE
   ============================================================ */

.login-brand .product-owner-line {
  display:block !important;

  width:100% !important;
  max-width:430px !important;

  margin:
    10px
    auto
    0 !important;

  color:
    rgba(255,255,255,.67) !important;

  font-size:11.5px !important;
  line-height:1.6 !important;

  text-align:center !important;

  white-space:normal !important;
}


/* ============================================================
   SECURITY / PRODUCT ATTRIBUTES
   ============================================================ */

.login-brand .security-note {
  box-sizing:border-box !important;

  display:flex !important;

  width:100% !important;
  max-width:445px !important;

  min-width:0 !important;

  align-items:center !important;
  justify-content:center !important;

  margin:
    28px
    auto
    0 !important;

  padding:
    12px
    18px !important;

  border:
    1px solid
    rgba(255,255,255,.16) !important;

  border-radius:12px !important;

  background:
    rgba(2, 37, 57, .20) !important;

  color:
    rgba(255,255,255,.88) !important;

  font-size:12.5px !important;
  line-height:1.55 !important;

  font-weight:500 !important;

  text-align:center !important;

  white-space:normal !important;

  box-shadow:none !important;
}


/* ============================================================
   MFA
   ============================================================ */

.login-card.mfa-card {
  max-height:none !important;
  overflow:visible !important;
}


/* ============================================================
   DESKTOP HEIGHT SAFETY
   ============================================================ */

@media (min-width:981px) and (min-height:650px) {

  .login-screen {
    overflow-y:hidden !important;
  }
}


/* ============================================================
   MEDIUM DESKTOP
   ============================================================ */

@media (max-width:1180px) and (min-width:901px) {

  .login-screen {
    grid-template-columns:
      minmax(410px, 470px)
      minmax(440px, 500px) !important;

    padding:24px !important;
  }

  .login-card {
    padding:
      36px
      40px !important;
  }

  .login-brand {
    padding:
      38px
      38px
      34px !important;
  }

  .login-brand .product-title::after {
    font-size:50px !important;
  }
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width:900px) {

  .login-screen {
    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:flex-start !important;

    gap:0 !important;

    min-height:100dvh !important;

    padding:
      22px
      16px
      30px !important;

    overflow-y:auto !important;
  }


  .login-brand {
    order:1 !important;

    width:min(100%,520px) !important;
    min-height:auto !important;

    padding:
      32px
      26px
      30px !important;

    border-radius:
      22px
      22px
      0
      0 !important;

    box-shadow:
      0 16px 40px
      rgba(0, 22, 38, .18) !important;
  }


  .login-card {
    order:2 !important;

    width:min(100%,520px) !important;

    min-width:0 !important;
    min-height:auto !important;

    padding:
      30px
      26px
      32px !important;

    border-radius:
      0
      0
      22px
      22px !important;

    box-shadow:
      0 18px 42px
      rgba(0, 22, 38, .20) !important;
  }


  .platform-login-logo {
    width:145px !important;
    height:66px !important;

    margin-bottom:20px !important;
  }


  .login-brand .product-title::after {
    font-size:43px !important;
  }


  .login-brand > p {
    margin-top:14px !important;

    font-size:16px !important;
  }


  .login-brand .security-note {
    margin-top:21px !important;
  }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width:520px) {

  .login-screen {
    padding:
      12px
      10px
      20px !important;
  }


  .login-brand {
    padding:
      26px
      18px
      24px !important;
  }


  .login-card {
    padding:
      26px
      20px
      28px !important;
  }


  .platform-login-logo {
    width:132px !important;
    height:60px !important;
  }


  .login-brand .product-title::after {
    font-size:37px !important;
  }


  .login-brand > p {
    font-size:15px !important;
  }


  .login-brand .product-owner-line {
    display:none !important;
  }


  .login-brand .security-note {
    font-size:11.5px !important;
  }


  .login-top h2 {
    font-size:27px !important;
  }
}