/* Phone-only login composition inspired by the clinic's blue visual identity. */
.login-mobile-tooth,
.login-mobile-divider,
.login-mobile-greeting,
.login-password-toggle {
  display: none;
}

@media (max-width: 600px) {
  html,
  body.login-page {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow-x: hidden;
  }

  body.login-page {
    position: relative;
    min-height: 100svh;
    color: #102b4a;
    background-color: #eaf3fb;
    background-image:
      linear-gradient(180deg, rgba(10, 52, 99, .1), rgba(15, 77, 130, .08)),
      url('../static/img/login-clinic.jpg');
    background-position: center, 52% center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  body.login-page::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: '';
    pointer-events: none;
    background:
      linear-gradient(145deg, rgba(8, 53, 107, .68) 0%, rgba(20, 103, 174, .18) 36%, rgba(255, 255, 255, .06) 70%),
      linear-gradient(0deg, rgba(21, 113, 191, .28), transparent 30%);
  }

  body.login-page > .glow {
    display: none;
  }

  .login-page .login-layout {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  }

  .login-page .login-panel {
    display: grid;
    width: 100%;
    min-width: 0;
    justify-items: center;
    padding: 0;
  }

  .login-page .login-card {
    width: min(100%, 500px);
    max-width: 500px;
    min-width: 0;
    padding: 19px clamp(17px, 5.5vw, 28px) 15px;
    overflow: hidden;
    color: #102b4a;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 14px;
    box-shadow: 0 20px 52px rgba(7, 37, 73, .24), 0 2px 8px rgba(255, 255, 255, .55) inset;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .login-page .login-card > .absolute {
    display: none;
  }

  .login-page .login-desktop-mark {
    display: none;
  }

  .login-page .login-mobile-tooth {
    display: block;
    width: 43px;
    height: 57px;
    margin: 0 auto 7px;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(28, 101, 173, .24));
  }

  .login-page .login-brand-copy {
    margin: 0 0 11px;
    text-align: center;
  }

  .login-page .login-brand-copy h2 {
    margin: 0;
    color: #102d50;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .login-page .login-brand-copy p {
    margin: 2px 0 0;
    color: #6d829c;
    font-size: .86rem;
    line-height: 1.55;
  }

  .login-page .login-brand-copy p br {
    display: none;
  }

  .login-page .login-mobile-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 2px auto 12px;
    color: #2685dc;
  }

  .login-page .login-mobile-divider::before,
  .login-page .login-mobile-divider::after {
    width: min(22vw, 68px);
    height: 1px;
    content: '';
    background: #8fc1f1;
  }

  .login-page .login-mobile-divider i {
    font-size: .95rem;
  }

  .login-page .login-mobile-divider img {
    display: block;
    width: 19px;
    height: 27px;
    object-fit: contain;
  }

  .login-page .login-mobile-greeting {
    display: block;
    margin-bottom: 13px;
    text-align: center;
  }

  .login-page .login-mobile-greeting h3 {
    margin: 0;
    color: #12365d;
    font-size: 1.13rem;
    font-weight: 900;
    line-height: 1.5;
  }

  .login-page .login-mobile-greeting p {
    margin: 2px 0 0;
    color: #71849b;
    font-size: .79rem;
    line-height: 1.6;
  }

  .login-page .login-card form {
    display: grid;
    gap: 12px;
  }

  .login-page .login-card form > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
  }

  .login-page .login-field label {
    display: block;
    margin: 0 0 5px;
    color: #425e7a;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.45;
  }

  .login-page .login-field-control {
    position: relative;
  }

  .login-page .login-card .input-style {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 53px;
    padding: 10px 47px 10px 46px;
    color: #17385d;
    background: rgba(255, 255, 255, .86);
    border: 1px solid #d4e1f2;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(21, 60, 100, .025);
    outline: none;
    font-family: 'Cairo', sans-serif;
    font-size: 16px;
    text-align: right;
  }

  .login-page .login-card .input-style::placeholder {
    color: #a1b0c2;
    opacity: 1;
  }

  .login-page .login-card .input-style:focus {
    background: #fff;
    border-color: #5599df;
    box-shadow: 0 0 0 3px rgba(61, 139, 218, .13);
  }

  .login-page .login-field-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    display: grid;
    width: 21px;
    height: 21px;
    color: #54718f;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .login-page .login-password-toggle {
    position: absolute;
    top: 50%;
    left: 6px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    color: #58728e;
    background: transparent;
    border: 0;
    border-radius: 7px;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .login-page .login-password-toggle:focus-visible {
    outline: 2px solid #3987d3;
    outline-offset: 1px;
  }

  .login-page .login-alert {
    margin: 0 0 10px;
    padding: 9px 11px;
    color: #9c3232;
    background: #fff1f0;
    border: 1px solid #f1d2d0;
    border-radius: 7px;
    font-size: .8rem;
    line-height: 1.55;
    text-align: center;
  }

  .login-page .login-card .login-btn {
    width: 100%;
    min-height: 53px;
    margin: 1px 0 0;
    padding: 10px 16px;
    color: #fff;
    background: linear-gradient(100deg, #3488ed, #2164da);
    border: 0;
    border-radius: 9px;
    box-shadow: 0 9px 20px rgba(39, 112, 222, .24);
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    font-weight: 900;
  }

  .login-page .login-card .login-btn:hover {
    box-shadow: 0 9px 20px rgba(39, 112, 222, .24);
    transform: none;
  }

  .login-page .login-footer {
    margin-top: 13px;
    padding-top: 10px;
    color: #8092a7;
    border-top: 1px solid #e5edf5;
    font-size: .69rem;
    line-height: 1.7;
  }
}

@media (max-width: 359px) {
  .login-page .login-layout {
    padding-right: 10px;
    padding-left: 10px;
  }

  .login-page .login-card {
    padding: 16px 15px 13px;
  }

  .login-page .login-mobile-tooth {
    width: 38px;
    height: 51px;
  }

  .login-page .login-card .input-style,
  .login-page .login-card .login-btn {
    min-height: 49px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-page .animate-float {
    animation: none;
  }
}

/* Live server login template: replace only its phone layout, not desktop. */
@media (max-width: 600px) {
  html,
  body.login-body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow-x: hidden;
  }

  body.login-body {
    min-height: 100svh;
    height: auto;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
    background: #174b77;
    overflow-y: auto;
  }

  body.login-body::before {
    position: fixed;
    z-index: 0;
    inset: -5px;
    content: '';
    pointer-events: none;
    background: url('img/login-clinic.jpg') center / cover no-repeat;
    filter: blur(1.7px) brightness(.96) saturate(.92);
    transform: scale(1.03);
  }

  .login-grid {
    position: fixed;
    z-index: 1;
    background-image: linear-gradient(145deg, rgba(7, 52, 105, .4), rgba(23, 112, 184, .09) 58%, rgba(255, 255, 255, .02));
    background-size: cover;
    opacity: 1;
    pointer-events: none;
  }

  .login-grid::before {
    position: absolute;
    top: -28px;
    left: -24px;
    width: min(48vw, 190px);
    height: min(58vw, 230px);
    content: '';
    background: url('img/tooth-professional.svg') center / contain no-repeat;
    filter: drop-shadow(0 12px 19px rgba(3, 42, 94, .35));
    opacity: .9;
  }

  .login-grid::after {
    position: absolute;
    top: -84px;
    left: -90px;
    width: min(86vw, 350px);
    aspect-ratio: 1;
    content: '';
    border: 28px solid rgba(61, 157, 231, .4);
    border-radius: 50%;
    pointer-events: none;
  }

  .login-blob,
  .login-side {
    display: none;
  }

  .login-panel {
    box-sizing: border-box;
    width: min(100%, 440px);
    max-width: 440px;
    min-width: 0;
    min-height: 0;
    margin: 0 auto;
    padding: 19px clamp(16px, 5vw, 25px) 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 14px;
    box-shadow: 0 20px 52px rgba(6, 34, 70, .27), 0 1px 0 rgba(255,255,255,.7) inset;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }

  .login-panel::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: '';
    background: linear-gradient(90deg, #6fc5f5, #2c83e5 52%, #174ebd);
  }

  .login-panel-logo {
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    margin-bottom: 5px;
    text-align: center;
  }

  .login-panel-logo-icon {
    width: 54px;
    height: 54px;
    border-radius: 13px;
    background: linear-gradient(145deg, #3ca2f3, #236bd4);
    box-shadow: 0 7px 17px rgba(43, 124, 214, .24);
    font-size: 1.42rem;
  }

  .login-panel-logo-text strong {
    color: #102f54;
    font-size: 1.14rem;
    line-height: 1.45;
  }

  .login-panel-logo-text span {
    color: #7488a1;
    font-size: .8rem;
  }

  .login-panel-header {
    margin: 0 0 14px;
    text-align: center;
  }

  .login-panel-header::before {
    display: block;
    width: min(62vw, 190px);
    height: 32px;
    margin: 0 auto 5px;
    content: '';
    background:
      linear-gradient(#86bbed, #86bbed) left center / calc(50% - 19px) 1px no-repeat,
      url('img/tooth-professional.svg') center / 20px 29px no-repeat,
      linear-gradient(#86bbed, #86bbed) right center / calc(50% - 19px) 1px no-repeat;
  }

  .login-panel-header h2 {
    margin: 0 0 2px;
    color: #12365d;
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.5;
  }

  .login-panel-header p {
    color: #6f8299;
    font-size: .8rem;
    line-height: 1.6;
  }

  .login-panel .form-group {
    margin-bottom: 12px;
  }

  .login-panel .form-group label {
    margin-bottom: 5px;
    color: #405d7a;
    font-size: .78rem;
  }

  .login-panel .form-group label i {
    color: #3986d4;
  }

  .login-panel .form-group input {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 10px 14px;
    color: #17385d;
    background: #f1f6fd;
    border: 1px solid #d5e2f3;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(21, 60, 100, .025);
    font-family: inherit;
    font-size: 16px;
    text-align: right;
  }

  .login-panel .form-group input::placeholder {
    color: #9aabc0;
    opacity: 1;
  }

  .login-panel .form-group input:focus {
    background: #fff;
    border-color: #5599df;
    box-shadow: 0 0 0 3px rgba(61, 139, 218, .12);
  }

  .login-panel .login-input-wrapper {
    position: relative;
  }

  .login-panel .login-input-wrapper > input,
  .login-panel .password-wrapper > input {
    padding-right: 66px;
  }

  .login-panel .login-input-icon {
    position: absolute;
    top: 1px;
    right: 1px;
    display: grid;
    width: 50px;
    height: calc(100% - 2px);
    place-items: center;
    color: #486783;
    background: #e7f0fc;
    border-radius: 0 8px 8px 0;
    pointer-events: none;
  }

  .login-panel .password-wrapper > input {
    padding-left: 53px;
  }

  .login-panel .password-wrapper .login-input-icon {
    right: 1px;
  }

  .login-panel .password-wrapper .toggle-password {
    left: 5px;
    z-index: 1;
  }

  .login-panel .password-wrapper input {
    padding-left: 52px;
  }

  .login-panel .toggle-password {
    left: 6px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    color: #58728e;
    border-radius: 7px;
  }

  .login-panel .login-submit-btn {
    height: 52px;
    margin-top: 4px;
    padding: 10px 15px;
    background: linear-gradient(100deg, #3488ed, #2164da);
    border-radius: 9px;
    box-shadow: 0 8px 19px rgba(39, 112, 222, .24);
    font-size: .98rem;
  }

  .login-panel .login-submit-btn:hover {
    transform: none;
    box-shadow: 0 8px 19px rgba(39, 112, 222, .24);
  }

  .login-panel .alert {
    padding: 9px 11px;
    border-radius: 7px;
    font-size: .8rem;
    line-height: 1.55;
  }

  .login-panel-footer {
    margin-top: 13px;
    padding-top: 10px;
    color: #8293a8;
    border-top-color: #e4edf5;
    font-size: .69rem;
    line-height: 1.7;
  }
}

@media (max-width: 359px) {
  .login-panel {
    padding: 16px 14px 12px;
  }

  .login-panel .form-group input,
  .login-panel .login-submit-btn {
    height: 49px;
  }
}