/* =========================================================
   VETRI IT LOGIN PAGE
========================================================= */

.login-page {

  margin: 0;

  min-height: 100vh;

  overflow: auto;

  background:
    #f7f8fc;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.login-shell {

  width: 100%;

  min-height: 100vh;

  display: grid;

  grid-template-columns:
    minmax(520px, 1.08fr)
    minmax(450px, .92fr);

}


/* =========================================================
   LEFT VISUAL PANEL
========================================================= */

.login-visual {

  position: relative;

  overflow: hidden;

  min-height: 100vh;

  padding:
    48px
    58px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  color: #ffffff;

  background:

    radial-gradient(
      circle at 15% 12%,
      rgba(44, 152, 255, .28),
      transparent 30%
    ),

    radial-gradient(
      circle at 80% 18%,
      rgba(151, 72, 255, .24),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      #07142f 0%,
      #0b1d43 52%,
      #102654 100%
    );

}


/* =========================================================
   DECORATIONS
========================================================= */

.visual-glow {

  position: absolute;

  border-radius: 50%;

  filter:
    blur(12px);

  pointer-events: none;

}


.visual-glow-one {

  width: 280px;
  height: 280px;

  left: -110px;
  bottom: -100px;

  background:
    rgba(57, 112, 255, .17);

}


.visual-glow-two {

  width: 300px;
  height: 300px;

  right: -120px;
  top: 80px;

  background:
    rgba(153, 68, 234, .14);

}


.visual-pattern {

  position: absolute;

  inset: 0;

  opacity: .15;

  background-image:

    linear-gradient(
      rgba(255,255,255,.045)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.045)
      1px,
      transparent 1px
    );

  background-size:
    44px
    44px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      rgba(0,0,0,.7),
      transparent
    );

}


/* =========================================================
   VISUAL CONTENT
========================================================= */

.visual-content {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 700px;

  margin:
    auto;

}


/* =========================================================
   LOGIN BRAND
========================================================= */

.login-brand {

  display: flex;

  align-items: center;

  gap: 17px;

  margin-bottom:
    58px;

}


/* V LOGO */

.login-v-logo {

  position: relative;

  width:
    67px;

  height:
    59px;

  flex:
    0
    0
    67px;

}


.login-v-left,
.login-v-right {

  position: absolute;

  top:
    3px;

  width:
    21px;

  height:
    53px;

  border-radius:
    9px;

}


.login-v-left {

  left:
    12px;

  transform:
    rotate(-26deg);

  background:

    linear-gradient(
      180deg,
      #2fd0ff 0%,
      #2b9cff 50%,
      #365cff 100%
    );

  box-shadow:
    0 12px 28px
    rgba(45, 153, 255, .28);

}


.login-v-right {

  left:
    35px;

  transform:
    rotate(26deg);

  background:

    linear-gradient(
      180deg,
      #a556ff 0%,
      #7b4dff 48%,
      #395cff 100%
    );

  box-shadow:
    0 12px 28px
    rgba(111, 73, 255, .28);

}


.login-brand-copy h1 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    31px;

  line-height:
    1;

  font-weight:
    760;

  letter-spacing:
    -.025em;

}


.login-brand-copy p {

  margin:
    7px
    0
    0;

  color:
    #dce4f6;

  font-size:
    12px;

}


/* =========================================================
   VISUAL HEADING
========================================================= */

.visual-heading {

  max-width:
    620px;

}


.visual-heading h2 {

  margin:
    0;

  max-width:
    590px;

  font-size:
    clamp(
      37px,
      4vw,
      54px
    );

  line-height:
    1.08;

  font-weight:
    720;

  letter-spacing:
    -.045em;

}


.visual-heading p {

  max-width:
    580px;

  margin:
    21px
    0
    0;

  color:
    #c9d3ea;

  font-size:
    13px;

  line-height:
    1.75;

}


/* =========================================================
   FEATURES
========================================================= */

.visual-feature-grid {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    13px;

  margin-top:
    40px;

}


.visual-feature-card {

  min-height:
    84px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    15px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    14px;

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

  backdrop-filter:
    blur(5px);

}


.visual-feature-card strong,
.visual-feature-card span {

  display:
    block;

}


.visual-feature-card strong {

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    650;

}


.visual-feature-card span {

  margin-top:
    4px;

  color:
    #cbd5ec;

  font-size:
    9px;

  line-height:
    1.45;

}


/* =========================================================
   FEATURE ICONS
========================================================= */

.feature-icon {

  position:
    relative;

  width:
    40px;

  height:
    40px;

  flex:
    0
    0
    40px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    11px;

  color:
    #ffffff;

  background:
    rgba(255,255,255,.09);

  border:
    1px solid
    rgba(255,255,255,.09);

}


/* BRANCH */

.feature-branch::before {

  content:
    "";

  width:
    19px;

  height:
    18px;

  border-left:
    1.7px solid
    currentColor;

  border-right:
    1.7px solid
    currentColor;

  border-bottom:
    1.7px solid
    currentColor;

}


.feature-branch::after {

  content:
    "";

  position:
    absolute;

  width:
    13px;

  height:
    13px;

  left:
    13px;

  top:
    8px;

  border-left:
    1.7px solid
    currentColor;

  border-top:
    1.7px solid
    currentColor;

  transform:
    rotate(45deg)
    scale(.75);

}


/* GST */

.feature-gst {

  font-size:
    18px;

  font-weight:
    700;

}


/* REPORT */

.feature-report::before {

  content:
    "";

  width:
    18px;

  height:
    20px;

  border:
    1.7px solid
    currentColor;

  border-radius:
    3px;

}


.feature-report::after {

  content:
    "";

  position:
    absolute;

  left:
    12px;

  bottom:
    10px;

  width:
    3px;

  height:
    7px;

  background:
    currentColor;

  box-shadow:
    5px -4px
    0 currentColor,
    10px -1px
    0 currentColor;

}


/* BACKUP */

.feature-backup {

  border:
    1.7px solid
    rgba(255,255,255,.25);

}


.feature-backup::before {

  content:
    "";

  width:
    17px;

  height:
    17px;

  border:
    1.7px solid
    currentColor;

  border-radius:
    50%;

}


.feature-backup::after {

  content:
    "";

  position:
    absolute;

  width:
    7px;

  height:
    7px;

  border-left:
    1.7px solid
    currentColor;

  border-bottom:
    1.7px solid
    currentColor;

}


/* =========================================================
   VISUAL FOOTER
========================================================= */

.visual-footer {

  position:
    absolute;

  left:
    58px;

  bottom:
    28px;

  z-index:
    2;

  color:
    #8494b7;

  font-size:
    10px;

}


/* =========================================================
   RIGHT PANEL
========================================================= */

.login-panel {

  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    42px;

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(133, 75, 242, .07),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcfbff 100%
    );

}


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

.login-form-wrap {

  width:
    min(
      420px,
      100%
    );

}


/* =========================================================
   MOBILE BRAND
========================================================= */

.mobile-login-brand {

  display:
    none;

  align-items:
    center;

  gap:
    11px;

  margin-bottom:
    35px;

}


.mobile-login-brand strong,
.mobile-login-brand small {

  display:
    block;

}


.mobile-login-brand strong {

  font-size:
    18px;

}


.mobile-login-brand small {

  color:
    var(--muted);

  margin-top:
    2px;

  font-size:
    9px;

}


.mobile-v-logo {

  width:
    43px;

  height:
    39px;

  position:
    relative;

}


.mobile-v-logo span {

  position:
    absolute;

  width:
    13px;

  height:
    35px;

  top:
    1px;

  border-radius:
    6px;

}


.mobile-v-logo span:first-child {

  left:
    7px;

  transform:
    rotate(-25deg);

  background:
    linear-gradient(
      #2bc9ff,
      #3760ff
    );

}


.mobile-v-logo span:last-child {

  left:
    22px;

  transform:
    rotate(25deg);

  background:
    linear-gradient(
      #a04dff,
      #475aff
    );

}


/* =========================================================
   WELCOME
========================================================= */

.login-welcome {

  margin-bottom:
    28px;

}


.welcome-badge {

  display:
    inline-flex;

  padding:
    6px
    9px;

  margin-bottom:
    16px;

  border-radius:
    999px;

  color:
    #7251de;

  background:
    #f0ecff;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .08em;

}


.login-welcome h2 {

  margin:
    0;

  color:
    #171f35;

  font-size:
    34px;

  font-weight:
    730;

  letter-spacing:
    -.035em;

}


.login-welcome p {

  margin:
    8px
    0
    0;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.55;

}


/* =========================================================
   LOGIN ERROR
========================================================= */

.login-error {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    12px;

  margin-bottom:
    17px;

  border:
    1px solid
    #ffd5d5;

  border-radius:
    10px;

  background:
    #fff3f3;

}


.error-icon {

  width:
    30px;

  height:
    30px;

  flex:
    0
    0
    30px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    white;

  background:
    #ff6565;

  font-weight:
    800;

}


.login-error strong,
.login-error span {

  display:
    block;

}


.login-error strong {

  color:
    #a63f3f;

  font-size:
    11px;

}


.login-error span {

  margin-top:
    3px;

  color:
    #b66d6d;

  font-size:
    9px;

}


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

.login-form {

  display:
    grid;

  gap:
    18px;

}


.login-field {

  display:
    grid;

  gap:
    7px;

}


.login-field label {

  color:
    #505a72;

  font-size:
    11px;

  font-weight:
    650;

}


.login-label-row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


/* =========================================================
   INPUT
========================================================= */

.input-wrapper {

  position:
    relative;

}


.login-input {

  width:
    100%;

  height:
    50px;

  padding:
    0
    46px;

  border:
    1px solid
    #dfe4ee;

  border-radius:
    11px;

  outline:
    none;

  color:
    #1e2942;

  background:
    #ffffff;

  font-size:
    12px;

  transition:
    border .18s ease,
    box-shadow .18s ease;

}


.login-input::placeholder {

  color:
    #a3abba;

}


.login-input:focus {

  border-color:
    #7a63ef;

  box-shadow:
    0 0 0 4px
    rgba(122, 99, 239, .09);

}


/* =========================================================
   INPUT ICONS
========================================================= */

.input-icon {

  position:
    absolute;

  left:
    16px;

  top:
    50%;

  transform:
    translateY(-50%);

  width:
    18px;

  height:
    18px;

  color:
    #828ca1;

  pointer-events:
    none;

}


/* USER ICON */

.user-input-icon::before {

  content:
    "";

  position:
    absolute;

  left:
    5px;

  top:
    1px;

  width:
    7px;

  height:
    7px;

  border:
    1.6px solid
    currentColor;

  border-radius:
    50%;

}


.user-input-icon::after {

  content:
    "";

  position:
    absolute;

  left:
    2px;

  bottom:
    0;

  width:
    13px;

  height:
    7px;

  border:
    1.6px solid
    currentColor;

  border-radius:
    8px 8px 3px 3px;

}


/* PASSWORD ICON */

.password-input-icon::before {

  content:
    "";

  position:
    absolute;

  left:
    2px;

  bottom:
    1px;

  width:
    14px;

  height:
    11px;

  border:
    1.6px solid
    currentColor;

  border-radius:
    3px;

}


.password-input-icon::after {

  content:
    "";

  position:
    absolute;

  left:
    5px;

  top:
    0;

  width:
    8px;

  height:
    8px;

  border:
    1.6px solid
    currentColor;

  border-bottom:
    0;

  border-radius:
    7px 7px 0 0;

}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {

  position:
    absolute;

  right:
    12px;

  top:
    50%;

  transform:
    translateY(-50%);

  width:
    34px;

  height:
    34px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    #8b94a7;

  cursor:
    pointer;

}


.password-toggle:hover {

  background:
    #f3f5f9;

}


/* EYE */

.eye-icon {

  position:
    relative;

  width:
    17px;

  height:
    11px;

  border:
    1.6px solid
    currentColor;

  border-radius:
    50%;

}


.eye-icon::after {

  content:
    "";

  position:
    absolute;

  left:
    5px;

  top:
    2px;

  width:
    4px;

  height:
    4px;

  border:
    1.5px solid
    currentColor;

  border-radius:
    50%;

}


.password-toggle.visible
.eye-icon::before {

  content:
    "";

  position:
    absolute;

  width:
    21px;

  height:
    1.5px;

  left:
    -3px;

  top:
    4px;

  background:
    currentColor;

  transform:
    rotate(-35deg);

}


/* =========================================================
   SIGN IN BUTTON
========================================================= */

.login-submit {

  width:
    100%;

  height:
    50px;

  margin-top:
    2px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  border:
    0;

  border-radius:
    11px;

  color:
    white;

  background:

    linear-gradient(
      90deg,
      #3e5fff 0%,
      #7251fa 55%,
      #9149eb 100%
    );

  box-shadow:
    0 12px 25px
    rgba(84, 73, 236, .20);

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease;

}


.login-submit:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 15px 30px
    rgba(84, 73, 236, .26);

}


/* ARROW */

.login-arrow {

  width:
    8px;

  height:
    8px;

  border-top:
    1.7px solid
    currentColor;

  border-right:
    1.7px solid
    currentColor;

  transform:
    rotate(45deg);

}


/* =========================================================
   SECURITY
========================================================= */

.login-security {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;

  margin-top:
    22px;

  padding:
    12px;

  border-radius:
    10px;

  color:
    #6f7890;

  background:
    #f8f9fc;

  font-size:
    9px;

  line-height:
    1.45;

}


.security-lock {

  position:
    relative;

  width:
    13px;

  height:
    11px;

  margin-top:
    3px;

  flex:
    0
    0
    13px;

  border:
    1.4px solid
    #6d7891;

  border-radius:
    2px;

}


.security-lock::before {

  content:
    "";

  position:
    absolute;

  left:
    2px;

  top:
    -7px;

  width:
    7px;

  height:
    7px;

  border:
    1.4px solid
    #6d7891;

  border-bottom:
    0;

  border-radius:
    6px 6px 0 0;

}


/* =========================================================
   VERSION
========================================================= */

.login-version {

  margin-top:
    20px;

  text-align:
    center;

  color:
    #a0a8b8;

  font-size:
    9px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media
(max-width: 1050px) {

  .login-shell {

    grid-template-columns:
      1fr
      1fr;

  }


  .login-visual {

    padding:
      40px;

  }


  .visual-feature-grid {

    grid-template-columns:
      1fr;

  }

}


@media
(max-width: 850px) {

  .login-shell {

    display:
      block;

  }


  .login-visual {

    display:
      none;

  }


  .login-panel {

    min-height:
      100vh;

    padding:
      30px
      20px;

  }


  .mobile-login-brand {

    display:
      flex;

  }


  .login-form-wrap {

    width:
      min(
        430px,
        100%
      );

  }

}


@media
(max-width: 480px) {

  .login-welcome h2 {

    font-size:
      29px;

  }


  .login-panel {

    padding:
      24px
      17px;

  }

}