/*
 * Cordova Android 15 renders edge-to-edge on Android 16. Framework7 2 uses
 * fixed 24px system-bar offsets, so override them with the actual insets.
 */
html.cordova-android.device-android {
  --safe-area-top: max(24px, env(safe-area-inset-top, 0px));
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  background-color: #fff;
}

html.cordova-android.device-android body,
html.cordova-android.device-android .framework7-root {
  background-color: #fff;
}

html.cordova-android.device-android .statusbar,
html.cordova-android.with-statusbar.device-android .statusbar {
  display: none !important;
}

html.cordova-android.device-android .framework7-root,
html.cordova-android.with-statusbar.device-android .framework7-root {
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: var(--safe-area-bottom);
}

/*
 * Main routed pages own their top safe area through the navbar. This keeps
 * the system-bar background continuous with each page header and avoids a
 * separate Framework7 statusbar spacer.
 */
html.cordova-android.device-android #app > .view-main > .page > .navbar {
  box-sizing: border-box;
  height: calc(56px + var(--safe-area-top));
}

html.cordova-android.device-android #app > .view-main > .page > .navbar > .navbar-inner {
  top: 0;
  height: 56px;
  margin-top: var(--safe-area-top);
}

html.cordova-android.device-android #app > .view-main > .page > .navbar ~ * .page-content,
html.cordova-android.device-android #app > .view-main > .page > .navbar ~ .page-content {
  padding-top: calc(56px + var(--safe-area-top));
}

html.cordova-android.device-android #app > .view-main > .page > .page-content:first-child {
  padding-top: var(--safe-area-top);
}

/* Welcome, login, and signup pages have no navbar to provide this inset. */
html.cordova-android.device-android #app > .view-main > .page.login-screen-content {
  box-sizing: border-box;
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

@media (min-width: 768px) {
  html.cordova-android.device-android #app > .view-main > .page > .navbar {
    height: calc(64px + var(--safe-area-top));
  }

  html.cordova-android.device-android #app > .view-main > .page > .navbar > .navbar-inner {
    height: 64px;
  }

  html.cordova-android.device-android #app > .view-main > .page > .navbar ~ * .page-content,
  html.cordova-android.device-android #app > .view-main > .page > .navbar ~ .page-content {
    padding-top: calc(64px + var(--safe-area-top));
  }
}

html.cordova-android.device-android .panel,
html.cordova-android.with-statusbar.device-android .panel {
  top: 0;
  height: 100%;
}

html.cordova-android.device-android .panel > .view > .page > .page-content {
  box-sizing: border-box;
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

/* Bottom-docked overlays need the inset on every screen size, phone or tablet. */
html.cordova-android.device-android .sheet-modal {
  padding-bottom: var(--safe-area-bottom);
}

html.cordova-android.device-android .toast.toast-bottom {
  padding-bottom: var(--safe-area-bottom);
}

/*
 * Framework7 popups are viewport-level siblings rather than children of the
 * padded app root. Keep fullscreen overlays inside both Android system bars.
 */
@media all and (max-width: 629px), (max-height: 629px) {
  html.cordova-android.device-android .popup,
  html.cordova-android.device-android .login-screen {
    top: var(--safe-area-top);
    height: calc(100% - var(--safe-area-top) - var(--safe-area-bottom));
  }
}

/*
 * The app root reserves the navigation inset for regular routed pages.
 * Full-page routes should use that visual space on every native screen;
 * centered tablet dialogs remain governed by their own popup rules.
 */
html.cordova-android.device-android #app > .view-main:has(> .page[data-name="calendar"].page-current),
html.cordova-android.device-android #app > .view-main:has(> .page[data-name="client"].page-current) {
  height: calc(100% + var(--safe-area-bottom));
}

html.cordova-android.device-android #app > .view-main:has(> .page[data-name="calendar"].page-current) .fab-right-bottom {
  bottom: calc(16px + var(--safe-area-bottom));
}

/* The CF action footer owns the bottom inset on every native screen. */
html.cordova-android.device-android #app-invoiceTickets #app-ticket-ticketactions {
  box-sizing: border-box;
  padding-bottom: var(--safe-area-bottom);
  background-color: var(--cf-action-color, #1ab5dc);
}

/* Cashflow uses its own fixed bottom controls instead of ticket actions. */
html.cordova-android.device-android #app-invoiceTickets #app-ticket-register-close-open-area,
html.cordova-android.device-android #app-invoiceTickets #app-ticket-cash-open-section {
  box-sizing: border-box;
  padding-bottom: var(--safe-area-bottom);
}

@media all and (min-width: 630px) and (min-height: 630px) {
  html.cordova-android.device-android .popup-tablet-fullscreen,
  html.cordova-android.device-android .login-screen {
    top: var(--safe-area-top);
    height: calc(100% - var(--safe-area-top) - var(--safe-area-bottom));
  }

  /* Keep the CF header below the status bar while its modal remains bottom-aligned. */
  html.cordova-android.device-android #app-invoiceTickets.md-mobile-fullscreen > .md-content {
    box-sizing: border-box;
    padding-top: var(--safe-area-top);
  }

  html.cordova-android.device-android #app-invoiceTickets #app-invoice-ticket-main-window,
  html.cordova-android.device-android #app-invoiceTickets nav.app-header-like {
    position: relative;
  }

  html.cordova-android.device-android #app-invoiceTickets nav.app-header-like::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--safe-area-top);
    background-color: inherit;
  }

  /*
   * Above 569px Framework7 turns the toast into a centered, rounded floating
   * pill that still sits at bottom: 0. Padding would stretch its background
   * down flush with the edge and flatten the floating look, so lift the
   * whole pill clear of the inset with margin instead.
   */
  html.cordova-android.device-android .toast.toast-bottom {
    padding-bottom: 0;
    margin-bottom: var(--safe-area-bottom);
  }
}

/*
 * On tablets Framework7 displays a regular popup as a centered 630px dialog.
 * These phone-only fullscreen rules must not override that positioning.
 */
@media all and (max-width: 629px), (max-height: 629px) {
  html.cordova-android.device-android.with-appointment-modal #EventEditModal {
    top: 0;
    height: 100%;
    background-color: #fff;
  }

  html.cordova-android.device-android.with-appointment-modal #EventEditModal > .view {
    height: calc(100% - var(--safe-area-bottom));
  }

  html.cordova-android.device-android.with-appointment-modal #EventEditModal .navbar {
    box-sizing: border-box;
    height: calc(56px + var(--safe-area-top));
  }

  html.cordova-android.device-android.with-appointment-modal #EventEditModal .navbar-inner {
    top: 0;
    height: 56px;
    margin-top: var(--safe-area-top);
  }

  html.cordova-android.device-android.with-appointment-modal #EventEditModal .navbar ~ * .page-content,
  html.cordova-android.device-android.with-appointment-modal #EventEditModal .navbar ~ .page-content {
    padding-top: calc(56px + var(--safe-area-top));
  }

  html.cordova-android.device-android.with-appointment-modal #EventEditModal .navbar.searchbar-safe-area-active {
    background-image: linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--safe-area-top) + 1px),
      transparent calc(var(--safe-area-top) + 1px),
      transparent 100%
    );
  }

  html.cordova-android.device-android.with-appointment-modal #apptModalStatus {
    bottom: var(--safe-area-bottom) !important;
    box-shadow: 0 -1px 10px -7px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 -1px 10px -7px rgba(0, 0, 0, 0.35);
  }

  html.cordova-android.device-android.with-appointment-modal #apptModalStatus::after {
    opacity: 0.55;
  }
}

/*
 * The invoicing module uses its own legacy fixed fullscreen modal rather than
 * a Framework7 popup. Pad its content box so the existing blue header starts
 * below the status-bar controls while the padding itself keeps the same blue.
 * Its bottom edge intentionally remains unchanged.
 */
@media all and (max-width: 629px), (max-height: 629px) {
  html.cordova-android.device-android #app-invoiceTickets.md-mobile-fullscreen > .md-content {
    box-sizing: border-box;
    padding-top: var(--safe-area-top);
  }

  html.cordova-android.device-android #app-invoiceTickets #app-invoice-ticket-main-window {
    position: relative;
  }

  html.cordova-android.device-android #app-invoiceTickets nav.app-header-like {
    position: relative;
  }

  html.cordova-android.device-android #app-invoiceTickets nav.app-header-like::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--safe-area-top);
    background-color: inherit;
  }
}

html.cordova-android.device-android body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
}