/* =========================================================
   HSMS-BBK
   SKIDDING MONITORING SYSTEM
   LOGIN PAGE
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing:
    border-box;
}


html,
body {
  margin:
    0;

  padding:
    0;

  width:
    100%;

  min-height:
    100%;
}


body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    #f1f5f9;

  color:
    #0f172a;

  min-height:
    100vh;
}


/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-page {
  min-height:
    100vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    30px;

  background:
    #f1f5f9;
}


/* =========================================================
   LOGIN CARD
   ========================================================= */

.login-card {
  width:
    min(
      960px,
      100%
    );

  min-height:
    570px;

  display:
    grid;

  grid-template-columns:
    44% 56%;

  background:
    #ffffff;

  border:
    1px solid #dbe2ea;

  border-radius:
    14px;

  overflow:
    hidden;

  box-shadow:
    0 25px 60px
    rgba(
      15,
      23,
      42,
      0.14
    );
}


/* =========================================================
   BRAND PANEL
   ========================================================= */

.brand-panel {
  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    46px;

  color:
    #ffffff;

  background:
    #0f172a;
}


/* =========================================================
   BRAND DECORATION
   ========================================================= */

.brand-panel::before {
  content:
    "";

  position:
    absolute;

  width:
    420px;

  height:
    420px;

  right:
    -220px;

  bottom:
    -180px;

  border-radius:
    50%;

  background:
    #172554;

  opacity:
    0.95;
}


.brand-panel::after {
  content:
    "";

  position:
    absolute;

  width:
    180px;

  height:
    180px;

  right:
    -90px;

  top:
    70px;

  border-radius:
    50%;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );
}


/* =========================================================
   BRAND CONTENT
   ========================================================= */

.brand-content {
  position:
    relative;

  z-index:
    2;
}


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

.brand-logo {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  font-size:
    20px;

  font-weight:
    800;

  letter-spacing:
    0.3px;
}


.logo-mark {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  border-radius:
    8px;

  background:
    #172554;

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    800;
}


/* =========================================================
   BRAND TITLE
   ========================================================= */

.brand-title {
  margin-top:
    125px;

  font-size:
    38px;

  line-height:
    1.1;

  font-weight:
    800;

  letter-spacing:
    -0.5px;
}


/* =========================================================
   BRAND DESCRIPTION
   ========================================================= */

.brand-description {
  max-width:
    330px;

  margin-top:
    22px;

  color:
    #cbd5e1;

  font-size:
    14px;

  line-height:
    1.7;
}


/* =========================================================
   BRAND LINE
   ========================================================= */

.brand-line {
  width:
    52px;

  height:
    3px;

  margin-top:
    25px;

  border-radius:
    5px;

  background:
    #1d4ed8;
}


/* =========================================================
   BRAND STATUS
   ========================================================= */

.brand-status {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    20px;

  color:
    #cbd5e1;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.3px;
}


.brand-status-dot {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #16a34a;

  box-shadow:
    0 0 0 3px
    rgba(
      22,
      163,
      74,
      0.15
    );
}


/* =========================================================
   BRAND FOOTER
   ========================================================= */

.brand-footer {
  position:
    relative;

  z-index:
    2;

  color:
    #64748b;

  font-size:
    10px;

  letter-spacing:
    0.2px;
}


.brand-footer span {
  margin:
    0 5px;

  color:
    #475569;
}


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

.form-panel {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    55px 65px;

  background:
    #ffffff;
}


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

.form-content {
  width:
    100%;

  max-width:
    390px;
}


/* =========================================================
   LOGIN HEADING
   ========================================================= */

.login-heading {
  color:
    #0f172a;

  font-size:
    32px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -0.3px;
}


.login-subtitle {
  margin-top:
    9px;

  margin-bottom:
    34px;

  color:
    #64748b;

  font-size:
    13px;

  line-height:
    1.6;
}


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

.form-group {
  margin-bottom:
    20px;
}


.form-group label {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #334155;

  font-size:
    12px;

  font-weight:
    700;
}


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

.input-wrapper {
  position:
    relative;

  width:
    100%;
}


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

.input-icon {
  position:
    absolute;

  left:
    14px;

  top:
    50%;

  transform:
    translateY(-50%);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #94a3b8;

  pointer-events:
    none;
}


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

.input-wrapper input {
  width:
    100%;

  height:
    48px;

  padding:
    0 45px;

  border:
    1px solid #cbd5e1;

  border-radius:
    7px;

  outline:
    none;

  background:
    #ffffff;

  color:
    #0f172a;

  font-family:
    inherit;

  font-size:
    13px;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}


.input-wrapper input::placeholder {
  color:
    #94a3b8;
}


.input-wrapper input:hover {
  border-color:
    #94a3b8;
}


.input-wrapper input:focus {
  border-color:
    #1d4ed8;

  background:
    #ffffff;

  box-shadow:
    0 0 0 3px
    rgba(
      29,
      78,
      216,
      0.10
    );
}


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

#password {
  padding-right:
    70px;
}


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

.password-toggle {
  position:
    absolute;

  right:
    12px;

  top:
    50%;

  transform:
    translateY(-50%);

  border:
    0;

  padding:
    4px;

  background:
    transparent;

  color:
    #64748b;

  font-family:
    inherit;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.4px;

  cursor:
    pointer;
}


.password-toggle:hover {
  color:
    #1d4ed8;
}


/* =========================================================
   OPTIONS
   ========================================================= */

.login-options {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-top:
    3px;
}


.remember {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #64748b;

  font-size:
    12px;

  cursor:
    pointer;

  user-select:
    none;
}


.remember input {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    #1d4ed8;

  cursor:
    pointer;
}


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

.login-error {
  min-height:
    20px;

  margin-top:
    12px;

  color:
    #dc2626;

  font-size:
    12px;

  line-height:
    1.5;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.login-button {
  width:
    100%;

  height:
    49px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  margin-top:
    4px;

  border:
    0;

  border-radius:
    7px;

  background:
    #0f172a;

  color:
    #ffffff;

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.6px;

  cursor:
    pointer;

  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


.login-button:hover {
  background:
    #172554;

  box-shadow:
    0 7px 16px
    rgba(
      15,
      23,
      42,
      0.18
    );
}


.login-button:active {
  transform:
    translateY(1px);

  box-shadow:
    none;
}


.login-button:disabled {
  opacity:
    0.6;

  cursor:
    wait;

  box-shadow:
    none;
}


.login-arrow {
  font-size:
    17px;

  line-height:
    1;

  transition:
    transform 0.15s ease;
}


.login-button:hover .login-arrow {
  transform:
    translateX(3px);
}


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

.login-version {
  margin-top:
    28px;

  text-align:
    center;

  color:
    #94a3b8;

  font-size:
    10px;

  letter-spacing:
    0.2px;
}


.login-version span {
  margin:
    0 5px;

  color:
    #cbd5e1;
}


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

@media (
  max-width: 850px
) {

  .login-card {
    grid-template-columns:
      40% 60%;
  }


  .brand-panel {
    padding:
      38px;
  }


  .form-panel {
    padding:
      45px;
  }


  .brand-title {
    margin-top:
      100px;

    font-size:
      32px;
  }

}


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

@media (
  max-width: 700px
) {

  .login-page {
    min-height:
      100vh;

    padding:
      15px;
  }


  .login-card {
    min-height:
      auto;

    grid-template-columns:
      1fr;

    border-radius:
      12px;
  }


  .brand-panel {
    min-height:
      235px;

    padding:
      28px;
  }


  .brand-title {
    margin-top:
      45px;

    font-size:
      28px;
  }


  .brand-description {
    display:
      none;
  }


  .brand-line {
    margin-top:
      16px;
  }


  .brand-footer {
    margin-top:
      24px;
  }


  .form-panel {
    padding:
      35px 28px 30px;
  }


  .login-heading {
    font-size:
      28px;
  }


  .login-subtitle {
    margin-bottom:
      28px;
  }

}


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

@media (
  max-width: 400px
) {

  .login-page {
    padding:
      10px;
  }


  .brand-panel {
    min-height:
      215px;

    padding:
      24px;
  }


  .brand-title {
    margin-top:
      38px;

    font-size:
      25px;
  }


  .form-panel {
    padding:
      30px 22px 25px;
  }


  .login-heading {
    font-size:
      25px;
  }


  .login-button {
    height:
      47px;
  }

}