/* Мобильная адаптация ТОЛЬКО для экрана входа/регистрации (view-auth) */
/* Не влияет на десктоп и другие экраны кабинета */

@media (max-width: 768px) {
  body.cab-page {
    min-height: 100dvh;
    overflow: hidden;
  }

  .cab-shell--auth {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .cab-shell--auth .cab-main {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px !important;
    margin: 0 !important;
  }

  #view-auth {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    gap: 12px !important;
  }

  .auth-hero__card {
    display: none !important;
  }

  .auth-hero__side {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 24px 20px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .auth-hero__heading {
    text-align: center !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
  }

  .auth-hero__sub {
    text-align: center !important;
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }

  .tg-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
  }

  .auth-divider {
    margin: 18px 0 !important;
  }

  .auth-form {
    gap: 14px !important;
    width: 100% !important;
  }

  .field {
    width: 100% !important;
  }

  .field__input {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn--lg {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
  }

  .auth-switch {
    text-align: center !important;
    margin-top: 20px !important;
  }

  .auth-links {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .cab-shell--auth {
    min-height: 100dvh !important;
  }

  .cab-shell--auth .cab-main {
    padding: 12px !important;
  }

  .auth-hero {
    max-width: 100% !important;
  }

  .auth-hero__side {
    max-width: 100% !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }

  .auth-hero__heading {
    font-size: 24px !important;
  }

  .auth-hero__sub {
    font-size: 14px !important;
  }

  .otp__box {
    width: 40px !important;
    height: 46px !important;
  }

  .otp__input {
    height: 46px !important;
  }
}


/* Premium responsive auth layout: handles short screens, notches and long
   registration/password-reset forms without clipping or forced centering. */
@media (max-width: 768px) {
  html, body.cab-page {
    min-height: 100%;
    min-height: 100dvh;
  }
  body.cab-page {
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
  .cab-shell--auth {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: max(16px, env(safe-area-inset-top)) 0
             max(16px, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }
  .cab-shell--auth .cab-main {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 12px !important;
  }
  #view-auth {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
  }
  .auth-hero, .auth-hero__side {
    min-width: 0 !important;
  }
  .auth-hero__side {
    padding: clamp(18px, 5vw, 28px) clamp(16px, 5vw, 24px) !important;
    overflow-wrap: anywhere;
  }
  .auth-hero__heading {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }
  .auth-form, .auth-form > *, .field, .field__input,
  .auth-hero__side button, .auth-hero__side a {
    min-width: 0;
    max-width: 100%;
  }
  .field__input {
    min-height: 48px;
  }
  .auth-hero__side button, .tg-btn, .btn--lg {
    min-height: 48px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .otp {
    max-width: 100%;
    gap: clamp(4px, 2vw, 10px);
    justify-content: center;
  }
}
@media (max-width: 380px) {
  .auth-hero__side { padding: 18px 14px !important; }
  .otp__box { width: min(38px, 10vw) !important; }
}
@media (max-height: 620px) and (max-width: 768px) {
  .cab-shell--auth { align-items: flex-start !important; }
  .cab-shell--auth .cab-main { padding-top: 8px !important; padding-bottom: 8px !important; }
  .auth-hero__side { padding-top: 16px !important; padding-bottom: 16px !important; }
}


/* Шапка фиксированная: авторизация начинается ниже неё, без перекрытия.
   Отступ включает высоту шапки и безопасную область устройств с вырезом. */
.cab-shell--auth {
  padding-top: 104px !important;
}
@media (max-width: 768px) {
  .cab-shell--auth {
    box-sizing: border-box;
    padding-top: calc(96px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .cab-shell--auth .cab-main {
    padding-top: 12px !important;
  }
}