/* =========================================================
   FamilyChat screen-fit fixes
   Keeps the login card inside the viewport without creating
   an internal scroll container unless a very tiny screen leaves
   no alternative.
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

/* ---------- Login page ---------- */

body.login-page {
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.login-centered-shell {
  width: 100%;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  padding: clamp(10px, 2.4vmin, 30px) !important;
  overflow: clip;
}

.login-centered-shell .login-form-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0 !important;
}

.login-centered-shell .login-card {
  width: min(100%, 462px) !important;
  max-width: calc(100vw - clamp(20px, 5vw, 60px)) !important;
  max-height: none !important;
  padding: clamp(18px, 3vmin, 34px) !important;
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
}

.login-centered-shell .login-card::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.login-centered-shell .login-card::before,
.login-centered-shell .login-card::after {
  z-index: 0;
}

.login-brand-lockup {
  gap: clamp(5px, 1vmin, 8px) !important;
  margin-bottom: clamp(8px, 1.8vmin, 18px) !important;
}

.login-logo-image {
  width: clamp(72px, 9.4vmin, 104px) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.login-centered-shell .login-card-header {
  margin-bottom: clamp(12px, 2vmin, 20px) !important;
}

.login-centered-shell .login-card-header h2 {
  font-size: clamp(27px, 3.8vmin, 36px) !important;
  margin-bottom: clamp(5px, 1vmin, 8px) !important;
}

.login-centered-shell .login-card-header p {
  max-width: min(320px, 100%) !important;
  font-size: clamp(13px, 1.7vmin, 16px) !important;
  line-height: 1.35 !important;
}

.auth-motion-panel {
  min-width: 0;
  max-width: 100%;
}

.login-centered-shell .social-login-button,
.login-centered-shell .primary-login-button,
.login-centered-shell .input-group {
  min-height: clamp(46px, 5.6vmin, 54px) !important;
  height: clamp(46px, 5.6vmin, 54px) !important;
}

.login-form {
  gap: clamp(6px, 1vmin, 10px) !important;
}

.login-form label {
  font-size: clamp(12px, 1.45vmin, 14px) !important;
}

.input-group {
  margin-bottom: clamp(3px, 0.7vmin, 8px) !important;
}

.login-divider {
  margin: clamp(10px, 1.7vmin, 18px) 0 !important;
}

.login-options {
  margin-bottom: clamp(8px, 1.4vmin, 13px) !important;
}

.login-centered-shell .signup-text {
  margin-top: clamp(10px, 1.8vmin, 18px) !important;
}

.login-footer-links {
  margin-top: clamp(8px, 1.4vmin, 14px) !important;
}

.login-message {
  margin-bottom: clamp(8px, 1.3vmin, 14px) !important;
  padding: clamp(9px, 1.5vmin, 12px) 12px !important;
}

.signup-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 6px;
}

.signup-field-pair {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.signup-field-pair .input-group {
  margin-bottom: 3px !important;
}

@media (max-height: 820px) {
  .login-centered-shell {
    padding-block: 12px !important;
  }

  .login-centered-shell .login-card {
    padding: 20px 28px !important;
  }

  .login-logo-image {
    width: 74px !important;
  }

  .login-brand-lockup {
    margin-bottom: 8px !important;
  }

  .login-centered-shell .login-card-header {
    margin-bottom: 12px !important;
  }

  .login-centered-shell .login-card-header h2 {
    font-size: 30px !important;
  }

  .login-centered-shell .login-card-header p {
    font-size: 14px !important;
  }

  .login-divider {
    margin: 10px 0 !important;
  }

  .login-centered-shell .signup-text,
  .login-footer-links {
    margin-top: 9px !important;
  }
}

@media (max-height: 700px) {
  .login-centered-shell .login-card {
    padding: 16px 24px !important;
  }

  .login-logo-image {
    width: 58px !important;
  }

  .login-brand-lockup span {
    font-size: 18px !important;
  }

  .login-centered-shell .login-card-header h2 {
    font-size: 27px !important;
  }

  .login-centered-shell .social-login-button,
  .login-centered-shell .primary-login-button,
  .login-centered-shell .input-group {
    min-height: 44px !important;
    height: 44px !important;
  }

  .login-footer-links {
    font-size: 12px !important;
  }
}

@media (max-height: 610px) {
  .login-centered-shell {
    align-items: start !important;
    padding-block: 8px !important;
    overflow-y: auto;
  }

  .login-centered-shell .login-card {
    margin-block: 0 !important;
  }
}

@media (max-width: 620px) {
  .login-centered-shell {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)) !important;
  }

  .login-centered-shell::before,
  .login-centered-shell::after {
    display: none !important;
  }

  .login-centered-shell .login-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(18px, 5vw, 28px) clamp(16px, 5vw, 24px) !important;
  }

  .login-logo-image {
    width: clamp(66px, 16vw, 84px) !important;
  }

  .signup-fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- Main app viewport fit ---------- */

body:not(.login-page) .app {
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
}

body:not(.login-page) .top-header.smart-header {
  width: 100%;
  max-width: 100vw;
  flex: 0 0 auto;
}

body:not(.login-page) .main-layout {
  width: 100%;
  max-width: min(1720px, 100vw) !important;
  height: calc(100svh - 70px) !important;
  height: calc(100dvh - 70px) !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding: clamp(12px, 1.45vw, 22px) clamp(12px, 1.8vw, 28px) !important;
  grid-template-columns: minmax(220px, 280px) minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 320px) !important;
  overflow: hidden !important;
}

body:not(.login-page) .main-layout > *,
body:not(.login-page) .app-tab-panel,
body:not(.login-page) .left-sidebar,
body:not(.login-page) .message-list-panel,
body:not(.login-page) .chat-panel,
body:not(.login-page) .right-sidebar,
body:not(.login-page) .full-page-panel,
body:not(.login-page) .tab-card,
body:not(.login-page) .overview-card,
body:not(.login-page) .settings-detail-card,
body:not(.login-page) .settings-menu-card,
body:not(.login-page) .family-member-card,
body:not(.login-page) .conversation {
  min-width: 0 !important;
  max-width: 100%;
}

body:not(.login-page) .left-sidebar,
body:not(.login-page) .message-list-panel,
body:not(.login-page) .chat-panel,
body:not(.login-page) .right-sidebar,
body:not(.login-page) .full-page-panel {
  height: 100% !important;
  min-height: 0 !important;
}

body:not(.login-page) .left-sidebar,
body:not(.login-page) .message-list-panel,
body:not(.login-page) .chat-panel,
body:not(.login-page) .right-sidebar,
body:not(.login-page) .full-page-panel {
  overflow: hidden;
}

body:not(.login-page) .right-sidebar,
body:not(.login-page) #scheduleTab .full-page-panel,
body:not(.login-page) #familyTab .full-page-panel,
body:not(.login-page) #friendsTab .full-page-panel,
body:not(.login-page) #exploreTab .full-page-panel,
body:not(.login-page) #savedTab .full-page-panel,
body:not(.login-page) #notificationsTab .full-page-panel,
body:not(.login-page) #settingsTab .full-page-panel {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body:not(.login-page) .tab-content-grid,
body:not(.login-page) .family-content-grid,
body:not(.login-page) .friends-content-grid,
body:not(.login-page) .settings-content-grid,
body:not(.login-page) .schedule-content-grid,
body:not(.login-page) .schedule-calendar-layout,
body:not(.login-page) .schedule-dashboard-grid,
body:not(.login-page) .family-dashboard-grid,
body:not(.login-page) .settings-dashboard-grid,
body:not(.login-page) .overview-grid {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1450px) {
  body:not(.login-page) .main-layout {
    grid-template-columns: minmax(220px, 270px) minmax(255px, 310px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 1100px) {
  body:not(.login-page) .main-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 820px) {
  body:not(.login-page) .app {
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
  }

  body:not(.login-page) .top-header.smart-header {
    height: 60px !important;
  }

  body:not(.login-page) .main-layout {
    height: calc(100svh - 60px) !important;
    height: calc(100dvh - 60px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:not(.login-page) .message-list-panel,
  body:not(.login-page) .chat-panel,
  body:not(.login-page) .full-page-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }

  body:not(.login-page) .full-page-panel {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
}


/* Hide the mobile app navigation while the calendar event modal is open.
   This keeps the Save/Delete controls reachable on small screens. */
@media (max-width: 820px) {
  body.calendar-modal-open .mobile-bottom-nav,
  body:has(#scheduleCalendarModal.active) .mobile-bottom-nav {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
  }

  body.calendar-modal-open .calendar-modal-backdrop,
  body:has(#scheduleCalendarModal.active) .calendar-modal-backdrop {
    z-index: 2000 !important;
  }
}

/* ---------- Mobile login no-scroll fit ----------
   On phones the login card now uses the full viewport instead of sitting
   inside a smaller scrollable card. The controls keep comfortable tap sizes,
   while spacing adapts to short screens so the login flow fits without the
   user needing to scroll. */
@media (max-width: 620px) {
  html:has(body.login-page),
  body.login-page {
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.login-page .login-centered-shell {
    width: 100% !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    place-items: stretch !important;
  }

  body.login-page .login-centered-shell .login-form-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  body.login-page .login-centered-shell .login-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100svh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding:
      max(10px, env(safe-area-inset-top))
      clamp(24px, 8vw, 34px)
      max(10px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.login-page .login-centered-shell .login-card::before,
  body.login-page .login-centered-shell .login-card::after {
    opacity: 0.55 !important;
    transform: scale(0.78) !important;
  }

  body.login-page .login-brand-lockup {
    gap: clamp(4px, 0.8dvh, 7px) !important;
    margin-bottom: clamp(6px, 1.3dvh, 12px) !important;
  }

  body.login-page .login-logo-image {
    width: clamp(56px, 15vw, 72px) !important;
  }

  body.login-page .login-brand-lockup span {
    font-size: clamp(17px, 5vw, 21px) !important;
    line-height: 1.05 !important;
  }

  body.login-page .login-centered-shell .login-card-header {
    margin-bottom: clamp(9px, 1.8dvh, 16px) !important;
  }

  body.login-page .login-centered-shell .login-card-header h2 {
    font-size: clamp(28px, 9vw, 36px) !important;
    line-height: 0.98 !important;
    margin-bottom: clamp(4px, 0.8dvh, 8px) !important;
  }

  body.login-page .login-centered-shell .login-card-header p {
    max-width: 300px !important;
    font-size: clamp(13px, 3.9vw, 15px) !important;
    line-height: 1.35 !important;
  }

  body.login-page .social-login-group {
    gap: clamp(7px, 1.2dvh, 10px) !important;
  }

  body.login-page .login-centered-shell .social-login-button,
  body.login-page .login-centered-shell .primary-login-button,
  body.login-page .login-centered-shell .input-group {
    height: clamp(44px, 8.8dvh, 52px) !important;
    min-height: 0 !important;
    border-radius: 16px !important;
  }

  body.login-page .social-login-button,
  body.login-page .primary-login-button {
    font-size: clamp(14px, 4.2vw, 16px) !important;
  }

  body.login-page .login-divider {
    gap: 10px !important;
    margin: clamp(7px, 1.4dvh, 12px) 0 !important;
    font-size: clamp(12px, 3.5vw, 13px) !important;
  }

  body.login-page .login-form {
    gap: clamp(4px, 0.8dvh, 8px) !important;
  }

  body.login-page .login-form label {
    font-size: clamp(12px, 3.5vw, 13px) !important;
    line-height: 1.1 !important;
  }

  body.login-page .input-group {
    margin-bottom: clamp(3px, 0.7dvh, 6px) !important;
    padding-inline: 14px !important;
  }

  body.login-page .input-group input {
    font-size: clamp(14px, 4vw, 16px) !important;
  }

  body.login-page .login-options {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: clamp(4px, 0.8dvh, 7px) 0 clamp(7px, 1.3dvh, 10px) !important;
    font-size: clamp(12px, 3.5vw, 13px) !important;
  }

  body.login-page .remember-me {
    gap: 7px !important;
    white-space: nowrap !important;
  }

  body.login-page .remember-me input {
    width: 16px !important;
    height: 16px !important;
  }

  body.login-page .login-options a {
    white-space: nowrap !important;
  }

  body.login-page .login-centered-shell .primary-login-button {
    margin-top: 0 !important;
  }

  body.login-page .login-centered-shell .signup-text {
    margin-top: clamp(8px, 1.5dvh, 13px) !important;
    font-size: clamp(12px, 3.6vw, 14px) !important;
    line-height: 1.25 !important;
  }

  body.login-page .login-footer-links {
    display: none !important;
  }

  body.login-page .login-message {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 10px) !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 9999 !important;
    margin: 0 !important;
    box-shadow: 0 14px 34px rgba(28, 24, 84, 0.16) !important;
  }

  body.login-page[data-auth-mode="signup"] .login-options {
    display: none !important;
  }

  body.login-page[data-auth-mode="signup"] .login-divider {
    margin-block: clamp(6px, 1.1dvh, 10px) !important;
  }

  body.login-page[data-auth-mode="signup"] .signup-fields {
    row-gap: clamp(3px, 0.6dvh, 6px) !important;
  }
}

@media (max-width: 620px) and (max-height: 620px) {
  body.login-page .login-centered-shell .login-card {
    padding:
      max(8px, env(safe-area-inset-top))
      clamp(24px, 8vw, 32px)
      max(8px, env(safe-area-inset-bottom)) !important;
  }

  body.login-page .login-logo-image {
    width: clamp(50px, 13vw, 58px) !important;
  }

  body.login-page .login-brand-lockup {
    margin-bottom: 5px !important;
  }

  body.login-page .login-brand-lockup span {
    font-size: 17px !important;
  }

  body.login-page .login-centered-shell .login-card-header {
    margin-bottom: 8px !important;
  }

  body.login-page .login-centered-shell .login-card-header h2 {
    font-size: clamp(26px, 8vw, 31px) !important;
  }

  body.login-page .login-centered-shell .login-card-header p {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  body.login-page .login-centered-shell .social-login-button,
  body.login-page .login-centered-shell .primary-login-button,
  body.login-page .login-centered-shell .input-group {
    height: 42px !important;
  }

  body.login-page .login-divider {
    margin: 6px 0 !important;
  }

  body.login-page .input-group {
    margin-bottom: 3px !important;
  }

  body.login-page .login-centered-shell .signup-text {
    margin-top: 7px !important;
  }
}

@media (max-width: 380px) and (max-height: 580px) {
  body.login-page .login-centered-shell .login-card-header p {
    display: none !important;
  }

  body.login-page .login-centered-shell .social-login-button,
  body.login-page .login-centered-shell .primary-login-button,
  body.login-page .login-centered-shell .input-group {
    height: 40px !important;
  }

  body.login-page .login-divider p {
    font-size: 11px !important;
  }

  body.login-page .login-form label {
    font-size: 12px !important;
  }
}