/* v143.0 — Réglages, Notifications et Profil deviennent des pages principales. */

body.app-main-page-open > main.page {
  visibility: hidden !important;
  pointer-events: none !important;
}

#month-settings-sheet.app-main-page,
#profile-sheet.app-main-page,
#notification-sheet.app-main-page {
  position: fixed !important;
  inset: 0 !important;
  z-index: 17 !important; /* sous la navigation basse */
  display: none !important;
  align-items: stretch !important;
  justify-content: center !important;
  padding: 0 !important;
  background: var(--paper, #fff) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

#month-settings-sheet.app-main-page.open,
#profile-sheet.app-main-page.open,
#notification-sheet.app-main-page.open {
  display: flex !important;
  animation: v143PageIn 220ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes v143PageIn {
  from { opacity: .01; transform: translate3d(10px,0,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

html[data-motion="minimal"] #month-settings-sheet.app-main-page.open,
html[data-motion="minimal"] #profile-sheet.app-main-page.open,
html[data-motion="minimal"] #notification-sheet.app-main-page.open {
  animation: none !important;
}

#month-settings-sheet.app-main-page > .app-main-page-surface,
#profile-sheet.app-main-page > .app-main-page-surface,
#notification-sheet.app-main-page > .app-main-page-surface {
  position: relative !important;
  width: min(100%, 930px) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: max(22px, calc(var(--safe-top, 0px) + 18px)) max(18px, calc(var(--safe-right, 0px) + 18px)) calc(var(--safe-bottom, 0px) + 78px) max(18px, calc(var(--safe-left, 0px) + 18px)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--paper, #fff) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#month-settings-sheet .sheet-drag-zone,
#profile-sheet .sheet-drag-zone,
#month-settings-sheet .sheet-handle,
#profile-sheet .sheet-handle,
#notification-sheet #notification-close,
#notification-sheet .v142-head-balance {
  display: none !important;
}

#month-settings-sheet .sheet-scroll-content,
#profile-sheet .sheet-scroll-content {
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding: 0 0 26px !important;
  scrollbar-width: none;
}
#month-settings-sheet .sheet-scroll-content::-webkit-scrollbar,
#profile-sheet .sheet-scroll-content::-webkit-scrollbar { display:none; }

/* Un vrai en-tête de page, sans langage de modale. */
#month-settings-sheet .settings-sheet-title,
#profile-sheet #profile-sheet-title {
  font-size: clamp(28px, 6vw, 36px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.65px !important;
  margin-top: 0 !important;
}

/* Notifications conserve son système de 2 volets et son morph au scroll. */
#notification-sheet .v142-notification-panel {
  display: flex !important;
  flex-direction: column !important;
}
#notification-sheet .v142-notification-head.notification-head {
  display: block !important;
  padding: 0 0 12px !important;
}
#notification-sheet .v142-notification-heading {
  text-align: left !important;
}
#notification-sheet .v142-notification-heading .settings-sheet-title {
  font-size: clamp(28px, 6vw, 36px) !important;
  text-align: left !important;
}
#notification-sheet .v142-notification-stage {
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
#notification-sheet .v142-notification-scroll {
  height: 100% !important;
  max-height: none !important;
  padding-bottom: 22px !important;
}

/* La navigation basse reste exactement au-dessus des pages. */
body.app-main-page-open .ca-bottom-nav {
  z-index: 60 !important;
}

@media (min-width: 900px) and (hover:hover) and (pointer:fine) {
  #month-settings-sheet.app-main-page,
  #profile-sheet.app-main-page,
  #notification-sheet.app-main-page {
    background: linear-gradient(180deg, #F3F5F7 0%, #EEF2F5 100%) !important;
  }
  #month-settings-sheet.app-main-page > .app-main-page-surface,
  #profile-sheet.app-main-page > .app-main-page-surface,
  #notification-sheet.app-main-page > .app-main-page-surface {
    width: 100% !important;
    max-width: none !important;
    padding: 34px clamp(36px, 3.6vw, 58px) 96px !important;
    background: transparent !important;
  }
}