/* ============================================================
   iOS PWA SAFE AREA FIX v2 — Surgical
   Target: iPhone installed PWA (iOS 26+)

   Rules:
   1. Shell page only: bottom safe area for custom dock
   2. Cover-content transparent toolbars: safe area as content padding
   3. Standard toolbars: safe area as toolbar padding
   4. No-toolbar pages: safe area as page padding
   5. Pushed pages: NO bottom safe area (no tabbar)
   ============================================================ */

@supports (-webkit-touch-callout: none) {

  /* ========== PORTRAIT ========== */
  @media (orientation: portrait) {

    /* ----------------------------------------------------------
       TOP SAFE AREA
       ---------------------------------------------------------- */

    /* 
       PAGES WITH NO TOOLBAR (shell, search):
       Apply safe area to page__content directly
    */
    #shell_page .page__content,
    #search_page .page__content {
      padding-top: env(safe-area-inset-top) !important;
    }

    /*
       STANDARD TOOLBAR (not cover-content):
       Safe area pushes toolbar down, content starts below toolbar
    */
    .page .toolbar:not(.toolbar--cover-content),
    ons-page .toolbar:not(.toolbar--cover-content) {
      padding-top: env(safe-area-inset-top) !important;
      box-sizing: content-box !important;
      position: relative !important;
      top: 0 !important;
    }

    /* Standard toolbar + content pair */
    .page .toolbar:not(.toolbar--cover-content) + .page__background,
    .page .toolbar:not(.toolbar--cover-content) + .page__background + .page__content,
    ons-page .toolbar:not(.toolbar--cover-content) + .page__background,
    ons-page .toolbar:not(.toolbar--cover-content) + .page__background + .page__content {
      top: calc(env(safe-area-inset-top) + 44px) !important;
      padding-top: 0 !important;
    }

    /*
       COVER-CONTENT TRANSPARENT TOOLBAR:
       Toolbar stays at top:0, content gets padding to push below it
       This is the majority of your pushed pages
    */
    .page .toolbar.toolbar--transparent.toolbar--cover-content,
    ons-page .toolbar.toolbar--transparent.toolbar--cover-content {
      padding-top: 0 !important;
      top: env(safe-area-inset-top) !important;
      position: absolute !important;
    }

    /* Cover-content: content needs padding to clear toolbar + safe area */
    .page .toolbar.toolbar--transparent.toolbar--cover-content + .page__background + .page__content,
    ons-page .toolbar.toolbar--transparent.toolbar--cover-content + .page__background + .page__content {
      top: 0 !important;
      padding-top: calc(env(safe-area-inset-top) + 44px) !important;
    }

    /*
       NESTED CONTENT inside cover-content pages (songView has nested structure)
    */
    .page .toolbar.toolbar--transparent.toolbar--cover-content + .page__background + .page__content .page__content {
      padding-top: 0 !important;
    }

    /* ----------------------------------------------------------
       BOTTOM SAFE AREA — SHELL PAGE ONLY
       The shell is the only page with a bottom tabbar/dock
       ---------------------------------------------------------- */

    /* 
       SHELL PAGE: Custom dock handling
       The tabbar container stays at bottom:0, transparent
       The dock (.bottom-tabbar__row) gets internal padding
    */
    #shell_page .tabbar.ons-tabbar__footer,
    #shell_page ons-tabbar[position="bottom"] .tabbar {
      padding-bottom: 0 !important;
      bottom: 0 !important;
      background: var(--background-color) !important;
      border: none !important;
      height: auto !important;
      min-height: unset !important;
    }

    #shell_page .bottom-tabbar__row {
      padding-bottom: env(safe-area-inset-bottom) !important;
      margin-bottom: 0 !important;
      /* Ensure the dock sits at the very bottom */
      position: relative !important;
      bottom: 0 !important;
    }

    /* Shell page content ends above the dock
    #shell_page .page__content {
      bottom: calc(65px + env(safe-area-inset-bottom)) !important;
      padding-bottom: 0 !important;
    } */

    /* Shell page background fills entire screen behind dock */
    #shell_page .page__background {
      bottom: 0 !important;
    }

    /*
       PUSHED PAGES (all-songs, settings, search, etc.):
       NO bottom tabbar, so NO bottom safe area needed.
       Content should extend to the very bottom of the screen.
    */
    #all_songs_page .page__content,
    #group_detail_page .page__content,
    #search_page .page__content,
    #settings_page .page__content,
    #pronounce_page .page__content,
    #list_page .page__content,
    #songView_page .page__content {
      bottom: 0 !important;
      padding-bottom: 0 !important;
    }

    /*
       PUSHED PAGES: Background also fills to bottom
    */
    #all_songs_page .page__background,
    #group_detail_page .page__background,
    #search_page .page__background,
    #settings_page .page__background,
    #pronounce_page .page__background,
    #list_page .page__background,
    #songView_page .page__background {
      bottom: 0 !important;
    }

    /* ----------------------------------------------------------
       FAB POSITIONING
       ---------------------------------------------------------- */

    /* Top FABs: clear the notch */
    .fab--top__left,
    .fab--top__center,
    .fab--top__right,
    ons-fab[position^="top"] {
      top: calc(env(safe-area-inset-top) + 20px) !important;
    }

    /* Bottom FABs on pushed pages: sit at bottom edge (no tabbar) */
    #all_songs_page .fab--bottom__right,
    #all_songs_page ons-fab[position="bottom right"],
    #songView_page .fab--bottom__right,
    #songView_page ons-fab[position="bottom right"] {
      bottom: calc(env(safe-area-inset-bottom) + 20px) !important;
    }

    /* ----------------------------------------------------------
       POPOVER / MODAL POSITIONING
       Ensure popovers don't get clipped by safe area
       ---------------------------------------------------------- */
    ons-popover {
      /* Popover should account for safe area when positioning */
      --safe-area-top: env(safe-area-inset-top);
      --safe-area-bottom: env(safe-area-inset-bottom);
    }

    /* If popover is triggered from toolbar button, ensure it's visible */
    .toolbar ~ ons-popover,
    ons-toolbar ~ ons-popover {
      margin-top: env(safe-area-inset-top) !important;
    }
  }

  /* ========== LANDSCAPE ========== */
  @media (orientation: landscape) {

    /* Side safe areas for landscape */
    .toolbar,
    ons-toolbar {
      padding-left: env(safe-area-inset-left) !important;
      padding-right: env(safe-area-inset-right) !important;
    }

    .page__content,
    ons-page > .page__content {
      padding-left: env(safe-area-inset-left) !important;
      padding-right: env(safe-area-inset-right) !important;
    }

    /* Shell dock in landscape
    #shell_page .bottom-tabbar__row {
      padding-bottom: env(safe-area-inset-bottom) !important;
    } */
  }
}