/* Screen controls only. Paper dimensions, print rules and PDF content are unchanged. */
@media screen {
  /* Scope the application shell so embedded modules keep their own headers. */
  #app.app > .topbar {
    height: calc(88px + env(safe-area-inset-top, 0px));
    min-height: calc(88px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
    padding-left: calc(24px + env(safe-area-inset-left, 0px));
  }
  #app.app > .sidebar {
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
  #app.app .sidebar-nav {
    min-height: 0;
    overscroll-behavior: contain;
  }
  #app.app > .main {
    padding-right: calc(clamp(14px, 3vw, 46px) + env(safe-area-inset-right, 0px));
    padding-left: calc(clamp(14px, 3vw, 46px) + env(safe-area-inset-left, 0px));
  }
  #app.app .integrated-tool-bar {
    top: calc(88px + env(safe-area-inset-top, 0px));
  }

  /* Keep a usable limit when the browser does not understand dynamic viewport units. */
  .upgrade-dialog {
    max-height: 85vh;
    max-height: 85dvh;
  }
  .activity-body dialog,
  dialog.dialog,
  dialog#modal {
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hijri-calendar {
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .date-picker-card {
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .integrated-tool-frame {
    height: calc(100vh - 184px);
    height: calc(100dvh - 184px);
  }
  .circulars-frame {
    height: calc(100vh - 160px);
    height: calc(100dvh - 160px);
  }
}

@media screen and (max-width: 720px) {
  #app.app > .topbar {
    height: calc(78px + env(safe-area-inset-top, 0px));
    min-height: calc(78px + env(safe-area-inset-top, 0px));
    padding-right: calc(11px + env(safe-area-inset-right, 0px));
    padding-left: calc(11px + env(safe-area-inset-left, 0px));
  }
  #app.app > .main {
    padding-right: calc(11px + env(safe-area-inset-right, 0px));
    padding-left: calc(11px + env(safe-area-inset-left, 0px));
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  }
  #app.app > .mobile-dock {
    right: calc(12px + env(safe-area-inset-right, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  #app.app .integrated-tool-bar {
    top: calc(78px + env(safe-area-inset-top, 0px));
  }
  .integrated-tool-frame {
    height: calc(100vh - 155px);
    height: calc(100dvh - 155px);
  }
}

@media screen and (max-width: 620px) {
  .date-picker-card {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media screen and (pointer: coarse) {
  #app.app .topbar-actions button,
  #app.app .sidebar-legal button,
  #app.app .nav-item,
  #app.app .integrated-tool-back,
  #app.app .pagination-buttons button,
  #app.app > .mobile-dock button,
  .date-picker-close,
  .date-picker-nav button,
  .date-picker-footer button,
  .date-picker-calendar-switch button,
  .upgrade-dialog button,
  .activity-body .calendar-heading button,
  .activity-body .calendar-nav button,
  .activity-body .calendar-footer button,
  .hijri-calendar .hijri-close,
  .hijri-calendar .hijri-navigation > button,
  .hijri-calendar .hijri-actions button,
  .dialog .close-button,
  .dialog .dialog-actions button,
  .button.button-small {
    min-width: 44px;
    min-height: 44px;
  }
  .dictation-controls .dictation-trigger {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .hijri-calendar .hijri-navigation {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px;
  }
}