:root{
  --app-height:100vh;
  --safe-bottom:env(safe-area-inset-bottom, 0px);

  --bottom-nav-height:84px;

  --screen-padding-x:14px;
  --screen-padding-top:12px;

  --screen-padding-bottom:
    calc(var(--bottom-nav-height) + var(--safe-bottom));
}

/* ROOT */

html,
body,
#app{
  width:100%;
  height:var(--app-height);
  max-height:var(--app-height);

  overflow:hidden;
}

/* MAIN SCREEN */

.app-screen{
  width:100%;
  height:var(--app-height);
  max-height:var(--app-height);

  overflow:hidden;

  box-sizing:border-box;

  padding:
    var(--screen-padding-top)
    var(--screen-padding-x)
    var(--screen-padding-bottom);
}

/* FLEX LAYOUT */

.app-flex-screen{
  display:flex;
  flex-direction:column;

  min-height:0;
}

/* SCROLL AREA */

.app-scroll-area{
  flex:1 1 0;

  min-height:0;

  overflow-y:auto;
  overflow-x:hidden;

  -webkit-overflow-scrolling:touch;
}

/* FIXED AREA */

.app-fixed-bottom{
  flex:0 0 auto;
}

/* SMALL PHONES */

@media (max-height:760px){

  :root{
    --bottom-nav-height:78px;
    --screen-padding-x:12px;
    --screen-padding-top:10px;
  }

}

@media (max-height:690px){

  :root{
    --bottom-nav-height:74px;
    --screen-padding-x:10px;
    --screen-padding-top:8px;
  }

}

/* =========================================================
   GLOBAL MOBILE COMPACT MODE
========================================================= */

@media (max-width:480px){

  :root{
    --bottom-nav-height:76px;

    --screen-padding-x:10px;
    --screen-padding-top:8px;
  }

  /* GLOBAL TEXT */

  h1{
    font-size:28px !important;
  }

  h2{
    font-size:22px !important;
  }

  h3{
    font-size:18px !important;
  }

  /* GLOBAL BUTTONS */

  button{
    min-height:42px;
  }

  /* GLOBAL CARDS */

  .action-card,
  .status-card,
  .profile-card,
  .support-status{
    border-radius:20px !important;
  }

}