@charset "utf-8";

:root {
   --login-primary: #1678b8;
   --login-primary-hover: #0f6398;
   --login-border: #d9dde2;
   --login-header-bg: #f3f4f5;
}

html,
body {
   min-height: 100%;
}

body.login-page {
   min-width: 320px;
   margin: 0;
   background: #fff;
   color: #222;
}

.login-header {
   height: 64px;
   border-bottom: 1px solid var(--login-border);
   background: var(--login-header-bg);
}

.login-header__inner {
   display: flex;
   align-items: center;
   height: 100%;
   padding-right: clamp(20px, 4vw, 56px);
   padding-left: clamp(20px, 4vw, 56px);
}

.login-brand {
   color: #555;
   font-size: clamp(1.15rem, 2vw, 1.45rem);
   font-weight: 700;
   letter-spacing: 0.02em;
   text-decoration: none;
}

.login-brand:hover,
.login-brand:focus {
   color: #333 !important;
}

.login-main {
   display: flex;
   justify-content: center;
   min-height: calc(100vh - 64px);
   padding: clamp(72px, 12vh, 140px) 20px 48px;
}

.login-card {
   width: min(100%, 420px);
   height: fit-content;
   overflow: hidden;
   border: 1px solid var(--login-border);
   border-radius: 2px;
   background: #fff;
   box-shadow: 0 8px 24px rgba(35, 55, 75, 0.08);
}

.login-card__header {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 48px;
   padding: 0 20px;
   border-bottom: 1px solid var(--login-border);
   background: #eef0f2;
}

.login-card__header h1 {
   margin: 0;
   color: #222;
   font-size: 1rem;
   font-weight: 700;
}

.login-card__mark {
   width: 15px;
   height: 15px;
   background: var(--login-primary);
}

.login-card__body {
   padding: 32px 34px 34px;
}

.login-error {
   margin-bottom: 20px;
   padding: 10px 12px;
   color: #8a2027;
   background: #fff0f1;
   border: 1px solid #e2a4a8;
   font-size: 0.86rem;
   font-weight: 700;
}

.login-card .form-label {
   margin-bottom: 8px;
   color: #222;
   font-size: 0.9rem;
   font-weight: 700;
}

.login-card .form-control {
   min-height: 42px;
   border-color: #cfd4da;
   border-radius: 2px;
   font-size: 1rem;
}

.login-card .form-control:focus {
   border-color: var(--login-primary);
   box-shadow: 0 0 0 3px rgba(22, 120, 184, 0.14);
}

.login-submit {
   min-width: 120px;
   border-color: var(--login-primary) !important;
   border-radius: 2px !important;
   background: var(--login-primary) !important;
}

.login-submit:hover,
.login-submit:focus {
   border-color: var(--login-primary-hover) !important;
   background: var(--login-primary-hover) !important;
}

@media (max-width: 575.98px) {
   .login-header {
      height: 56px;
   }

   .login-main {
      min-height: calc(100vh - 56px);
      padding-top: 48px;
   }

   .login-card__body {
      padding: 28px 24px 30px;
   }

   .login-submit {
      width: 100%;
   }
}